├── .editorconfig ├── .eslintrc ├── .github ├── ISSUE_TEMPLATE.md └── workflows │ └── node.yml ├── .gitignore ├── .prettierignore ├── LICENSE ├── README.md ├── e2e ├── 2.x │ ├── babel-in-package │ │ ├── components │ │ │ ├── Basic.vue │ │ │ ├── Coffee.vue │ │ │ ├── Tsx.vue │ │ │ ├── TypeScript.vue │ │ │ └── TypeScriptChild.vue │ │ ├── package.json │ │ ├── test.js │ │ └── tsconfig.json │ ├── basic │ │ ├── __snapshots__ │ │ │ └── test.js.snap │ │ ├── babel.config.js │ │ ├── components │ │ │ ├── Basic.vue │ │ │ ├── BasicSrc.html │ │ │ ├── BasicSrc.js │ │ │ ├── BasicSrc.vue │ │ │ ├── Coffee.vue │ │ │ ├── CoffeeScript.vue │ │ │ ├── Constructor.vue │ │ │ ├── ExtendedTsConfig.vue │ │ │ ├── FunctionalSFC.vue │ │ │ ├── FunctionalSFCParent.vue │ │ │ ├── FunctionalSFCRender.vue │ │ │ ├── Jade.vue │ │ │ ├── Jsx.vue │ │ │ ├── ModuleRequiringEsModuleInterop.js │ │ │ ├── NamedExport.vue │ │ │ ├── NoScript.vue │ │ │ ├── Pug.vue │ │ │ ├── PugBase.pug │ │ │ ├── PugRelativeExtends.vue │ │ │ ├── RenderFunction.vue │ │ │ ├── ScriptAndScriptSetup.vue │ │ │ ├── ScriptSetup.vue │ │ │ ├── SourceMapsSrc.vue │ │ │ ├── TemplateString.vue │ │ │ ├── TypeScript.vue │ │ │ ├── TypeScriptChild.vue │ │ │ ├── coffee.spec.js │ │ │ └── relative │ │ │ │ └── PugRelativeBase.pug │ │ ├── package.json │ │ ├── test.js │ │ ├── tsconfig.base.json │ │ └── tsconfig.json │ ├── custom-block │ │ ├── __snapshots__ │ │ │ └── test.js.snap │ │ ├── babel.config.js │ │ ├── components │ │ │ ├── Basic.vue │ │ │ └── Multiple.vue │ │ ├── package.json │ │ ├── test.js │ │ └── transformer.js │ ├── custom-transformers │ │ ├── babel-transformer.js │ │ ├── components │ │ │ └── Scss.vue │ │ ├── package.json │ │ ├── pcss-transformer.js │ │ ├── scss-transformer.js │ │ └── test.js │ ├── sass-importer │ │ ├── entry │ │ │ ├── babel-transformer.js │ │ │ ├── components │ │ │ │ └── Entry.vue │ │ │ ├── package.json │ │ │ └── test.js │ │ ├── lib │ │ │ ├── index.vue │ │ │ └── package.json │ │ ├── sass-lib-v1 │ │ │ ├── index.scss │ │ │ └── package.json │ │ └── sass-lib-v2 │ │ │ ├── index.scss │ │ │ └── package.json │ └── style │ │ ├── babel.config.js │ │ ├── colors.less │ │ ├── colors.scss │ │ ├── components │ │ ├── External.vue │ │ ├── Less.vue │ │ ├── PostCss.vue │ │ ├── Sass.vue │ │ ├── Scss.vue │ │ ├── Stylus.vue │ │ ├── relative │ │ │ └── resource.styl │ │ └── styles │ │ │ ├── external.css │ │ │ ├── less-a.less │ │ │ ├── sass-a.sass │ │ │ ├── sass-b.sass │ │ │ ├── scss-a.scss │ │ │ └── scss-b.scss │ │ ├── jest.config.js │ │ ├── package.json │ │ ├── setup.js │ │ ├── test.js │ │ ├── variables.less │ │ └── variables.scss └── 3.x │ ├── babel-in-package │ ├── components │ │ ├── Basic.vue │ │ ├── Coffee.vue │ │ ├── Tsx.vue │ │ ├── TypeScript.vue │ │ └── TypeScriptChild.vue │ ├── package.json │ ├── test.js │ └── tsconfig.json │ ├── basic │ ├── __snapshots__ │ │ └── test.js.snap │ ├── babel.config.js │ ├── components │ │ ├── Basic.vue │ │ ├── BasicSrc.html │ │ ├── BasicSrc.js │ │ ├── BasicSrc.vue │ │ ├── ClassComponent.vue │ │ ├── ClassComponentProperty.vue │ │ ├── ClassComponentWithMixin.vue │ │ ├── ClassMixin.ts │ │ ├── Coffee.vue │ │ ├── CoffeeScript.vue │ │ ├── CompilerDirective.vue │ │ ├── Constructor.vue │ │ ├── ExtendedTsConfig.vue │ │ ├── FunctionalRenderFn.vue │ │ ├── FunctionalSFC.vue │ │ ├── FunctionalSFCParent.vue │ │ ├── Jade.vue │ │ ├── Jsx.vue │ │ ├── ModuleRequiringEsModuleInterop.js │ │ ├── NamedExport.vue │ │ ├── NoScript.vue │ │ ├── Pug.vue │ │ ├── PugBase.pug │ │ ├── PugRelativeExtends.vue │ │ ├── RenderFunction.vue │ │ ├── ScriptAndScriptSetup.vue │ │ ├── ScriptSetup.vue │ │ ├── ScriptSetupSugarRef.vue │ │ ├── SourceMapsSrc.vue │ │ ├── TsSrc.ts │ │ ├── TsSrc.vue │ │ ├── TypeScript.vue │ │ ├── TypeScriptChild.vue │ │ ├── coffee.spec.js │ │ └── relative │ │ │ └── PugRelativeBase.pug │ ├── jest.config.js │ ├── package.json │ ├── test.js │ ├── tsconfig.base.json │ ├── tsconfig.json │ └── v-test-directive.js │ ├── custom-block │ ├── __snapshots__ │ │ └── test.js.snap │ ├── babel.config.js │ ├── components │ │ ├── Basic.vue │ │ └── Multiple.vue │ ├── package.json │ ├── test.js │ └── transformer.js │ ├── custom-transformers │ ├── babel-transformer.js │ ├── components │ │ └── Scss.vue │ ├── package.json │ ├── pcss-transformer.js │ ├── scss-transformer.js │ └── test.js │ ├── javascript │ ├── components │ │ ├── Basic.vue │ │ └── Coffee.vue │ ├── package.json │ └── test.js │ ├── sass-importer │ ├── entry │ │ ├── babel-transformer.js │ │ ├── components │ │ │ └── Entry.vue │ │ ├── package.json │ │ └── test.js │ ├── lib │ │ ├── index.vue │ │ └── package.json │ ├── sass-lib-v1 │ │ ├── index.scss │ │ └── package.json │ └── sass-lib-v2 │ │ ├── index.scss │ │ └── package.json │ ├── style │ ├── babel.config.js │ ├── colors.less │ ├── colors.scss │ ├── components │ │ ├── External.vue │ │ ├── Less.vue │ │ ├── PostCss.vue │ │ ├── Sass.vue │ │ ├── Scss.vue │ │ ├── Stylus.vue │ │ ├── relative │ │ │ └── resource.styl │ │ └── styles │ │ │ ├── external.css │ │ │ ├── less-a.less │ │ │ ├── sass-a.sass │ │ │ ├── sass-b.sass │ │ │ ├── scss-a.scss │ │ │ └── scss-b.scss │ ├── package.json │ ├── test.js │ ├── variables.less │ └── variables.scss │ ├── typescript-with-babel │ ├── package.json │ └── sub-project │ │ ├── components │ │ └── Basic.vue │ │ ├── test.js │ │ └── tsconfig.json │ ├── typescript-with-compiler-options │ ├── package.json │ ├── src │ │ ├── components │ │ │ └── PropsDestructureTransform.vue │ │ ├── shims-vue.d.ts │ │ └── test.ts │ └── tsconfig.json │ └── typescript │ ├── package.json │ ├── src │ ├── components │ │ ├── Basic.vue │ │ └── ScriptSetup.vue │ ├── shims-vue.d.ts │ └── test.ts │ └── tsconfig.json ├── package.json ├── packages ├── vue2-jest │ ├── lib │ │ ├── constants.js │ │ ├── ensure-require.js │ │ ├── generate-code.js │ │ ├── index.js │ │ ├── map-lines.js │ │ ├── module-name-mapper-helper.js │ │ ├── process-custom-blocks.js │ │ ├── process-style.js │ │ ├── process.js │ │ ├── throw-error.js │ │ ├── transformers │ │ │ ├── coffee.js │ │ │ └── typescript.js │ │ └── utils.js │ └── package.json └── vue3-jest │ ├── lib │ ├── constants.js │ ├── ensure-require.js │ ├── generate-code.js │ ├── index.js │ ├── map-lines.js │ ├── module-name-mapper-helper.js │ ├── process-custom-blocks.js │ ├── process-style.js │ ├── process.js │ ├── throw-error.js │ ├── transformers │ │ ├── coffee.js │ │ └── typescript.js │ └── utils.js │ └── package.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": [ 4 | "plugin:vue/recommended", 5 | "standard", 6 | "prettier", 7 | "prettier/standard" 8 | ], 9 | "rules": { 10 | "no-new": 0 11 | }, 12 | "env": { 13 | "jest": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /.github/workflows/node.yml: -------------------------------------------------------------------------------- 1 | name: Node.js CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | - next 8 | paths: 9 | - '**' 10 | - '!**.md' 11 | pull_request: 12 | branches: 13 | - master 14 | - next 15 | paths: 16 | - '**' 17 | - '!**.md' 18 | 19 | jobs: 20 | test: 21 | strategy: 22 | matrix: 23 | node: [14, 16, 18] 24 | runs-on: ubuntu-latest 25 | 26 | steps: 27 | - uses: actions/checkout@v2 28 | - name: Use Node.js ${{ matrix.node }} 29 | uses: actions/setup-node@v3 30 | with: 31 | node-version: ${{ matrix.node }} 32 | cache: yarn 33 | 34 | - name: Install Project Dependencies 35 | run: yarn --frozen-lockfile 36 | 37 | - name: Test 38 | run: yarn test 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | #OS files 2 | .DS_Store 3 | node_modules 4 | **/node_modules/** 5 | 6 | # Editor files 7 | /.idea 8 | *.suo 9 | *.ntvs* 10 | *.njsproj 11 | *.sln 12 | **.swp 13 | *.sw* 14 | coverage 15 | 16 | # Logs 17 | logs 18 | *.log 19 | temp-dir 20 | 21 | # Runtime data 22 | pids 23 | *.pid 24 | *.seed 25 | *.pid.lock 26 | 27 | package-lock.json 28 | /e2e/**/yarn.lock 29 | 30 | .vscode 31 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | coverage 2 | package-lock.json 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 Edd Yerburgh 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-jest 2 | 3 | Jest transformer for Vue Single File Components. 4 | 5 | ## Installation 6 | 7 | Since we need to support a variety of Vue and Jest versions, vue-jest doesn't follow semantic versioning. 8 | 9 | | Vue version | Jest Version | npm Package | Branch | 10 | | ----------- | ----------------- | ------------------- | ------ | 11 | | Vue 2 | Jest 26 and below | `vue-jest@4` | | 12 | | Vue 3 | Jest 26 and below | `vue-jest@5` | | 13 | | Vue 2 | Jest 27 and above | `@vue/vue2-jest@27` | 27.x | 14 | | Vue 3 | Jest 27 and above | `@vue/vue3-jest@27` | 27.x | 15 | | Vue 2 | Jest 28 and above | `@vue/vue2-jest@28` | 28.x | 16 | | Vue 3 | Jest 28 and above | `@vue/vue3-jest@28` | 28.x | 17 | 18 | ```bash 19 | # Vue 2 20 | npm install --save-dev @vue/vue2-jest@28 # (use the appropriate version) 21 | yarn add @vue/vue2-jest@28 --dev 22 | 23 | # Vue 3 24 | npm install --save-dev @vue/vue3-jest@28 # (use the appropriate version) 25 | yarn add @vue/vue3-jest@28 --dev 26 | ``` 27 | 28 | ## Setup 29 | 30 | To use `vue-jest` as a transformer for your `.vue` files, map them to the appropriate `vue-jest` module: 31 | 32 | ```json 33 | { 34 | "jest": { 35 | "transform": { 36 | "^.+\\.vue$": "@vue/vue2-jest" // Update to match your installed version 37 | } 38 | } 39 | } 40 | ``` 41 | 42 | A full config will look like this. 43 | 44 | ```json 45 | { 46 | "jest": { 47 | "moduleFileExtensions": ["js", "json", "vue"], 48 | "transform": { 49 | "^.+\\.js$": "babel-jest", 50 | "^.+\\.vue$": "@vue/vue2-jest" 51 | } 52 | } 53 | } 54 | ``` 55 | 56 | ### Usage with Babel 7 57 | 58 | If you use [jest](https://github.com/facebook/jest) > 24.0.0 and [babel-jest](https://github.com/facebook/jest/tree/master/packages/babel-jest) make sure to install babel-core@bridge 59 | 60 | ```bash 61 | npm install --save-dev babel-core@bridge 62 | yarn add babel-core@bridge --dev 63 | ``` 64 | 65 | ## Supported languages for SFC sections 66 | 67 | vue-jest compiles ` 48 | -------------------------------------------------------------------------------- /e2e/2.x/babel-in-package/components/Coffee.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /e2e/2.x/babel-in-package/components/Tsx.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /e2e/2.x/babel-in-package/components/TypeScript.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 22 | -------------------------------------------------------------------------------- /e2e/2.x/babel-in-package/components/TypeScriptChild.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /e2e/2.x/babel-in-package/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-babel-in-package", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "scripts": { 7 | "test": "jest --no-cache test.js" 8 | }, 9 | "dependencies": { 10 | "source-map": "0.5.6", 11 | "vue": "^2.7.7", 12 | "vue-template-compiler": "^2.7.7" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "^7.9.0", 16 | "@babel/preset-env": "^7.9.0", 17 | "@vue/babel-preset-jsx": "^1.2.4", 18 | "@vue/test-utils": "^1.1.0", 19 | "@vue/vue2-jest": "^29.0.0", 20 | "coffeescript": "^2.3.2", 21 | "jest": "29.x", 22 | "jest-environment-jsdom": "29.x", 23 | "typescript": "^4.6.4" 24 | }, 25 | "jest": { 26 | "testEnvironment": "jsdom", 27 | "moduleFileExtensions": [ 28 | "js", 29 | "json", 30 | "vue" 31 | ], 32 | "transform": { 33 | "^.+\\.js$": "babel-jest", 34 | "^.+\\.vue$": "@vue/vue2-jest" 35 | } 36 | }, 37 | "babel": { 38 | "presets": [ 39 | "@babel/env", 40 | "@vue/babel-preset-jsx" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /e2e/2.x/babel-in-package/test.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import TypeScript from './components/TypeScript.vue' 3 | import Basic from './components/Basic.vue' 4 | import Coffee from './components/Coffee.vue' 5 | import Tsx from './components/Tsx.vue' 6 | 7 | test('processes .vue files', () => { 8 | const wrapper = mount(Basic) 9 | wrapper.vm.toggleClass() 10 | }) 11 | 12 | test('processes .vue file with lang set to coffee', () => { 13 | const wrapper = mount(Coffee) 14 | expect(wrapper.vm).toBeTruthy() 15 | }) 16 | 17 | test('processes .vue files with lang set to ts(typescript)', () => { 18 | const wrapper = mount(TypeScript) 19 | expect(wrapper.vm).toBeTruthy() 20 | }) 21 | 22 | test('processes .vue files with lang set to tsx(typescript)', () => { 23 | const wrapper = mount(Tsx) 24 | expect(wrapper.text()).toContain('tsx components') 25 | }) 26 | -------------------------------------------------------------------------------- /e2e/2.x/babel-in-package/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "es6"], 5 | "module": "ES2015", 6 | "moduleResolution": "node", 7 | "types": ["vue-typescript-import-dts", "node"], 8 | "isolatedModules": false, 9 | "experimentalDecorators": true, 10 | "noImplicitAny": true, 11 | "noImplicitThis": true, 12 | "strictNullChecks": true, 13 | "removeComments": true, 14 | "emitDecoratorMetadata": true, 15 | "suppressImplicitAnyIndexErrors": true, 16 | "allowSyntheticDefaultImports": true, 17 | "sourceMap": true, 18 | "esModuleInterop": true 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /e2e/2.x/basic/__snapshots__/test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`generates source maps for .vue files 1`] = ` 4 | { 5 | "file": "./components/Basic.vue", 6 | "mappings": ";;;;;;eAuBe;AACb,MAAI,EAAE,OADO;AAEb,UAAQ,EAAE;AACR,kBAAc,EAAE,SAAS,cAAT,GAA0B;AACxC,aAAO;AACL,WAAG,EAAE,KAAK,OADL;AAEL,YAAI,EAAE,CAAC,KAAK,OAFP;AAGL,cAAM,EAAE,KAAK;AAHR,OAAP;AAKD;AAPO,GAFG;AAWb,MAAI,EAAE,SAAS,IAAT,GAAgB;AACpB,WAAO;AACL,SAAG,EAAE,4BADA;AAEL,aAAO,EAAE;AAFJ,KAAP;AAID,GAhBY;AAiBb,SAAO,EAAE;AACP,eAAW,EAAE,SAAS,WAAT,GAAuB;AAClC,WAAK,OAAL,GAAe,CAAC,KAAK,OAArB;AACD;AAHM;AAjBI", 7 | "names": [], 8 | "sources": [ 9 | "components/Basic.vue", 10 | ], 11 | "sourcesContent": [ 12 | " 17 | 18 | 23 | 28 | 33 | 34 | 59 | ", 60 | ], 61 | "version": 3, 62 | } 63 | `; 64 | 65 | exports[`generates source maps using src attributes 1`] = ` 66 | { 67 | "file": "./components/SourceMapsSrc.vue", 68 | "mappings": ";;;;;;eAAe;AACbA,MAAI,EAAE,OADO;AAEbC,UAAQ,EAAE;AACRC,kBAAc,EAAE,SAASA,cAAT,GAA0B;AACxC,aAAO;AACLC,WAAG,EAAE,KAAKC,OADL;AAELC,YAAI,EAAE,CAAC,KAAKD,OAFP;AAGLE,cAAM,EAAE,KAAKF;AAHR,OAAP;AAKD;AAPO,GAFG;AAWbG,MAAI,EAAE,SAASA,IAAT,GAAgB;AACpB,WAAO;AACLC,SAAG,EAAE,4BADA;AAELJ,aAAO,EAAE;AAFJ,KAAP;AAID,GAhBY;AAiBbK,SAAO,EAAE;AACPC,eAAW,EAAE,SAASA,WAAT,GAAuB;AAClC,WAAKN,OAAL,GAAe,CAAC,KAAKA,OAArB;AACD;AAHM;AAjBI,C", 69 | "names": [ 70 | "name", 71 | "computed", 72 | "headingClasses", 73 | "red", 74 | "isCrazy", 75 | "blue", 76 | "shadow", 77 | "data", 78 | "msg", 79 | "methods", 80 | "toggleClass", 81 | ], 82 | "sources": [ 83 | "SourceMapsSrc.vue", 84 | ], 85 | "sourcesContent": [ 86 | "export default { 87 | name: 'basic', 88 | computed: { 89 | headingClasses: function headingClasses() { 90 | return { 91 | red: this.isCrazy, 92 | blue: !this.isCrazy, 93 | shadow: this.isCrazy 94 | } 95 | } 96 | }, 97 | data: function data() { 98 | return { 99 | msg: 'Welcome to Your Vue.js App', 100 | isCrazy: false 101 | } 102 | }, 103 | methods: { 104 | toggleClass: function toggleClass() { 105 | this.isCrazy = !this.isCrazy 106 | } 107 | } 108 | } 109 | ", 110 | ], 111 | "version": 3, 112 | } 113 | `; 114 | -------------------------------------------------------------------------------- /e2e/2.x/basic/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@babel/preset-env'], 3 | plugins: ['transform-vue-jsx'] 4 | } 5 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/Basic.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 17 | 22 | 23 | 48 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/BasicSrc.html: -------------------------------------------------------------------------------- 1 |
2 |

{{ msg }}

3 |
-------------------------------------------------------------------------------- /e2e/2.x/basic/components/BasicSrc.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'basic', 3 | computed: { 4 | headingClasses: function headingClasses() { 5 | return { 6 | red: this.isCrazy, 7 | blue: !this.isCrazy, 8 | shadow: this.isCrazy 9 | } 10 | } 11 | }, 12 | data: function data() { 13 | return { 14 | msg: 'Welcome to Your Vue.js App', 15 | isCrazy: false 16 | } 17 | }, 18 | methods: { 19 | toggleClass: function toggleClass() { 20 | this.isCrazy = !this.isCrazy 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/BasicSrc.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/Coffee.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/CoffeeScript.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/Constructor.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/ExtendedTsConfig.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 35 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/FunctionalSFC.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/FunctionalSFCParent.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/FunctionalSFCRender.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/Jade.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/Jsx.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/ModuleRequiringEsModuleInterop.js: -------------------------------------------------------------------------------- 1 | module.exports = () => false 2 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/NamedExport.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/NoScript.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/Pug.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/PugBase.pug: -------------------------------------------------------------------------------- 1 | div(class='pug-base') 2 | block component -------------------------------------------------------------------------------- /e2e/2.x/basic/components/PugRelativeExtends.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/RenderFunction.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/ScriptAndScriptSetup.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | 24 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/ScriptSetup.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 21 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/SourceMapsSrc.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/TemplateString.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/TypeScript.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 22 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/TypeScriptChild.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/coffee.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount, mount } from '@vue/test-utils' 2 | import Coffee from './resources/Coffee.vue' 3 | import CoffeeScript from './resources/CoffeeScript.vue' 4 | import CoffeeES6 from './resources/CoffeeES6.vue' 5 | import CoffeeScriptES6 from './resources/CoffeeScriptES6.vue' 6 | 7 | describe('Test CoffeeScript - coffee.spec.js', () => { 8 | test('processes .vue file with lang set to coffee', () => { 9 | shallowMount(Coffee) 10 | }) 11 | 12 | test('processes .vue file with lang set to coffeescript', () => { 13 | shallowMount(CoffeeScript) 14 | }) 15 | 16 | test('processes .vue file with lang set to coffee (ES6)', () => { 17 | shallowMount(CoffeeES6) 18 | }) 19 | 20 | test('processes .vue file with lang set to coffeescript (ES6)', () => { 21 | shallowMount(CoffeeScriptES6) 22 | }) 23 | 24 | test('processes .vue file with lang set to coffeescript (ES6)', () => { 25 | const wrapper = mount(CoffeeScriptES6) 26 | expect(typeof wrapper).toBe('object') 27 | }) 28 | }) 29 | -------------------------------------------------------------------------------- /e2e/2.x/basic/components/relative/PugRelativeBase.pug: -------------------------------------------------------------------------------- 1 | div(class='pug-relative-base') 2 | block component -------------------------------------------------------------------------------- /e2e/2.x/basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-basic", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "scripts": { 7 | "test": "jest --no-cache --coverage test.js" 8 | }, 9 | "dependencies": { 10 | "vue": "^2.7.7", 11 | "vue-template-compiler": "^2.7.7" 12 | }, 13 | "devDependencies": { 14 | "@babel/core": "^7.9.0", 15 | "@babel/preset-env": "^7.9.0", 16 | "@vue/test-utils": "^1.1.0", 17 | "@vue/vue2-jest": "^29.0.0", 18 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 19 | "babel-plugin-syntax-jsx": "^6.18.0", 20 | "babel-plugin-transform-vue-jsx": "^3.7.0", 21 | "coffeescript": "^2.3.2", 22 | "jade": "^1.11.0", 23 | "jest": "29.x", 24 | "jest-environment-jsdom": "29.x", 25 | "pug": "^3.0.1", 26 | "sass": "^1.23.7", 27 | "typescript": "^4.6.4" 28 | }, 29 | "jest": { 30 | "testEnvironment": "jsdom", 31 | "moduleFileExtensions": [ 32 | "js", 33 | "json", 34 | "vue" 35 | ], 36 | "transform": { 37 | "^.+\\.js$": "babel-jest", 38 | "^.+\\.vue$": "@vue/vue2-jest" 39 | }, 40 | "moduleNameMapper": { 41 | "^~?__styles/(.*)$": "/components/styles/$1" 42 | }, 43 | "globals": { 44 | "vue-jest": { 45 | "pug": { 46 | "basedir": "./" 47 | }, 48 | "templateCompiler": { 49 | "transpileOptions": { 50 | "transforms": { 51 | "dangerousTaggedTemplateString": true 52 | } 53 | } 54 | } 55 | } 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /e2e/2.x/basic/test.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import TypeScript from './components/TypeScript.vue' 3 | import TemplateString from './components/TemplateString.vue' 4 | import { resolve } from 'path' 5 | import { readFileSync } from 'fs' 6 | import jestVue from '@vue/vue2-jest' 7 | import RenderFunction from './components/RenderFunction.vue' 8 | import Jade from './components/Jade.vue' 9 | import FunctionalSFC from './components/FunctionalSFC.vue' 10 | import FunctionalSFCRender from './components/FunctionalSFCRender.vue' 11 | import Basic from './components/Basic.vue' 12 | import BasicSrc from './components/BasicSrc.vue' 13 | import { randomExport } from './components/NamedExport.vue' 14 | import Coffee from './components/Coffee.vue' 15 | import CoffeeScript from './components/CoffeeScript.vue' 16 | import FunctionalSFCParent from './components/FunctionalSFCParent.vue' 17 | import NoScript from './components/NoScript.vue' 18 | import Pug from './components/Pug.vue' 19 | import PugRelative from './components/PugRelativeExtends.vue' 20 | import Jsx from './components/Jsx.vue' 21 | import Constructor from './components/Constructor.vue' 22 | import { compileStyle } from '@vue/component-compiler-utils' 23 | import ScriptSetup from './components/ScriptSetup' 24 | import ScriptAndScriptSetup from './components/ScriptAndScriptSetup' 25 | import ExtendedTsConfig from './components/ExtendedTsConfig.vue' 26 | 27 | jest.mock('@vue/component-compiler-utils', () => ({ 28 | ...jest.requireActual('@vue/component-compiler-utils'), 29 | compileStyle: jest.fn(() => ({ errors: [], code: '' })) 30 | })) 31 | 32 | beforeEach(() => jest.clearAllMocks()) 33 | test('processes .vue files', () => { 34 | const wrapper = mount(Basic) 35 | expect(wrapper.vm.msg).toEqual('Welcome to Your Vue.js App') 36 | wrapper.vm.toggleClass() 37 | }) 38 | 39 | test('processes .vue files with src attributes', () => { 40 | const wrapper = mount(BasicSrc) 41 | wrapper.vm.toggleClass() 42 | }) 43 | 44 | test('handles named exports', () => { 45 | expect(randomExport).toEqual(42) 46 | }) 47 | 48 | test('generates source maps for .vue files', () => { 49 | const filePath = './components/Basic.vue' 50 | const fileString = readFileSync(resolve(__dirname, filePath), { 51 | encoding: 'utf8' 52 | }) 53 | const config = { 54 | moduleFileExtensions: ['js', 'vue'] 55 | } 56 | 57 | const { map } = jestVue.process(fileString, filePath, { 58 | config 59 | }) 60 | 61 | expect(JSON.parse(map)).toMatchSnapshot() 62 | }) 63 | 64 | test('generates source maps using src attributes', () => { 65 | const filePath = './components/SourceMapsSrc.vue' 66 | const fileString = readFileSync(resolve(__dirname, filePath), { 67 | encoding: 'utf8' 68 | }) 69 | 70 | const config = { moduleFileExtensions: ['js', 'vue'] } 71 | 72 | const { map } = jestVue.process(fileString, filePath, { config }) 73 | 74 | expect(JSON.parse(map)).toMatchSnapshot() 75 | }) 76 | 77 | test('processes .vue file using jsx', () => { 78 | const wrapper = mount(Jsx) 79 | expect(wrapper.element.tagName).toBe('DIV') 80 | }) 81 | 82 | test('processes extended functions', () => { 83 | const wrapper = mount(Constructor) 84 | expect(wrapper.element.tagName).toBe('DIV') 85 | }) 86 | 87 | test('processes .vue file with lang set to coffee', () => { 88 | const wrapper = mount(Coffee) 89 | expect(wrapper.element.tagName).toBe('DIV') 90 | }) 91 | 92 | test('processes .vue file with lang set to coffeescript', () => { 93 | const wrapper = mount(CoffeeScript) 94 | expect(wrapper.element.tagName).toBe('DIV') 95 | }) 96 | 97 | test('processes .vue files with lang set to typescript', () => { 98 | const wrapper = mount(TypeScript) 99 | expect(wrapper.element.tagName).toBe('DIV') 100 | }) 101 | 102 | test('processes .vue files with template strings in the template', () => { 103 | const wrapper = mount(TemplateString) 104 | expect(wrapper.attributes('data-sth')).toBe(` 105 | query { 106 | id 107 | } 108 | `) 109 | }) 110 | 111 | test('processes functional components', () => { 112 | const clickSpy = jest.fn() 113 | const wrapper = mount(FunctionalSFC, { 114 | context: { 115 | props: { msg: { id: 1, title: 'foo' }, onClick: clickSpy } 116 | } 117 | }) 118 | expect(wrapper.text().trim()).toBe('foo') 119 | wrapper.trigger('click') 120 | expect(clickSpy).toHaveBeenCalledWith(1) 121 | }) 122 | 123 | test('processes functional components using render function', () => { 124 | const wrapper = mount(FunctionalSFCRender) 125 | const CSS_CLASSES = ['ModuleClass'] 126 | expect(wrapper.classes().toString()).toBe(CSS_CLASSES.toString()) 127 | }) 128 | 129 | test('processes SFC with functional template from parent', () => { 130 | const wrapper = mount(FunctionalSFCParent) 131 | expect(wrapper.text().trim()).toBe('foo') 132 | }) 133 | 134 | test('handles missing script block', () => { 135 | const wrapper = mount(NoScript) 136 | expect(wrapper.element.tagName).toBe('FOOTER') 137 | }) 138 | 139 | test('processes .vue file with jade template', () => { 140 | const wrapper = mount(Jade) 141 | expect(wrapper.element.tagName).toBe('DIV') 142 | expect(wrapper.classes()).toContain('jade') 143 | }) 144 | 145 | test('processes pug templates', () => { 146 | const wrapper = mount(Pug) 147 | expect(wrapper.element.tagName).toBe('DIV') 148 | expect(wrapper.classes()).toContain('pug-base') 149 | expect(wrapper.find('.pug-extended').exists()).toBeTruthy() 150 | }) 151 | 152 | test('supports relative paths when extending templates from .pug files', () => { 153 | const wrapper = mount(PugRelative) 154 | expect(wrapper.element.tagName).toBe('DIV') 155 | expect(wrapper.find('.pug-relative-base').exists()).toBeTruthy() 156 | }) 157 | 158 | test('processes SFC with no template', () => { 159 | const wrapper = mount(RenderFunction) 160 | expect(wrapper.element.tagName).toBe('SECTION') 161 | }) 162 | 163 | test('processes SFC with 10 | 11 | 12 | { 13 | "en": { 14 | "hello": "Hello!" 15 | }, 16 | "ja": { 17 | "hello": "こんにちは！" 18 | } 19 | } 20 | 21 | -------------------------------------------------------------------------------- /e2e/2.x/custom-block/components/Multiple.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 12 | { 13 | "en": { 14 | "hello": "Hello!" 15 | }, 16 | "ja": { 17 | "hello": "こんにちは！" 18 | } 19 | } 20 | 21 | 22 | 23 | { 24 | "foo": "foo" 25 | } 26 | 27 | -------------------------------------------------------------------------------- /e2e/2.x/custom-block/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-custom-block", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "scripts": { 7 | "test": "jest --no-cache --coverage test.js" 8 | }, 9 | "dependencies": { 10 | "vue": "^2.7.7", 11 | "vue-template-compiler": "^2.7.7" 12 | }, 13 | "devDependencies": { 14 | "@babel/core": "^7.9.0", 15 | "@babel/preset-env": "^7.9.0", 16 | "@vue/vue2-jest": "^29.0.0", 17 | "jest": "29.x", 18 | "jest-environment-jsdom": "29.x" 19 | }, 20 | "jest": { 21 | "moduleFileExtensions": [ 22 | "js", 23 | "json", 24 | "vue" 25 | ], 26 | "transform": { 27 | "^.+\\.js$": "babel-jest", 28 | "^.+\\.vue$": "@vue/vue2-jest" 29 | }, 30 | "moduleNameMapper": { 31 | "^~?__styles/(.*)$": "/components/styles/$1" 32 | }, 33 | "globals": { 34 | "vue-jest": { 35 | "transform": { 36 | "custom": "./transformer.js" 37 | } 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /e2e/2.x/custom-block/test.js: -------------------------------------------------------------------------------- 1 | import Basic from './components/Basic.vue' 2 | import Multiple from './components/Multiple.vue' 3 | 4 | test('Basic', () => { 5 | expect(Basic.__custom).toMatchObject([ 6 | { 7 | en: { 8 | hello: 'Hello!' 9 | }, 10 | ja: { 11 | hello: 'こんにちは！' 12 | } 13 | } 14 | ]) 15 | expect(Basic.__custom).toMatchSnapshot() 16 | }) 17 | 18 | test('Multiple blocks', () => { 19 | expect(Multiple.__custom).toMatchObject([ 20 | { 21 | en: { 22 | hello: 'Hello!' 23 | }, 24 | ja: { 25 | hello: 'こんにちは！' 26 | } 27 | }, 28 | { 29 | foo: 'foo' 30 | } 31 | ]) 32 | expect(Multiple.__custom).toMatchSnapshot() 33 | }) 34 | -------------------------------------------------------------------------------- /e2e/2.x/custom-block/transformer.js: -------------------------------------------------------------------------------- 1 | function convert(content) { 2 | return JSON.stringify(JSON.parse(content)) 3 | .replace(/\u2028/g, '\\u2028') // LINE SEPARATOR 4 | .replace(/\u2029/g, '\\u2029') // PARAGRAPH SEPARATOR 5 | .replace(/\\/g, '\\\\') 6 | .replace(/'/g, "\\'") 7 | } 8 | 9 | module.exports = { 10 | process({ blocks, vueOptionsNamespace, filename, config }) { 11 | const ret = blocks.reduce((codes, block) => { 12 | codes.push( 13 | `${vueOptionsNamespace}.__custom = ${vueOptionsNamespace}.__custom || [];${vueOptionsNamespace}.__custom.push(${convert( 14 | block.content 15 | )});` 16 | ) 17 | return codes 18 | }, []) 19 | return ret.join('') 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /e2e/2.x/custom-transformers/babel-transformer.js: -------------------------------------------------------------------------------- 1 | const { createTransformer } = require('babel-jest').default 2 | module.exports = createTransformer({ 3 | presets: ['@babel/preset-env'] 4 | }) 5 | -------------------------------------------------------------------------------- /e2e/2.x/custom-transformers/components/Scss.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | 19 | -------------------------------------------------------------------------------- /e2e/2.x/custom-transformers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-custom-transformers", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "scripts": { 7 | "test": "jest --no-cache --coverage test.js" 8 | }, 9 | "dependencies": { 10 | "vue": "^2.7.7", 11 | "vue-template-compiler": "^2.7.7" 12 | }, 13 | "devDependencies": { 14 | "@babel/core": "^7.9.0", 15 | "@babel/preset-env": "^7.9.0", 16 | "@vue/test-utils": "^1.1.0", 17 | "@vue/vue2-jest": "^29.0.0", 18 | "babel-jest": "29.x", 19 | "jest": "29.x", 20 | "jest-environment-jsdom": "29.x", 21 | "postcss": "^7.0.13", 22 | "postcss-color-function": "^4.0.1", 23 | "sass": "^1.23.7" 24 | }, 25 | "jest": { 26 | "testEnvironment": "jsdom", 27 | "moduleFileExtensions": [ 28 | "js", 29 | "json", 30 | "vue" 31 | ], 32 | "transform": { 33 | "^.+\\.js$": "./babel-transformer.js", 34 | "^.+\\.vue$": "@vue/vue2-jest" 35 | }, 36 | "moduleNameMapper": { 37 | "^~?__styles/(.*)$": "/components/styles/$1" 38 | }, 39 | "globals": { 40 | "vue-jest": { 41 | "transform": { 42 | "^scss$": "./scss-transformer.js", 43 | "^pcss|postcss$": "./pcss-transformer.js", 44 | "^js$": "./babel-transformer.js" 45 | } 46 | } 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /e2e/2.x/custom-transformers/pcss-transformer.js: -------------------------------------------------------------------------------- 1 | const postcss = require('postcss') 2 | var colorFunction = require('postcss-color-function') 3 | module.exports = { 4 | process: function(content, filepath, config, attrs) { 5 | return postcss([colorFunction()]).process(content).css 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /e2e/2.x/custom-transformers/scss-transformer.js: -------------------------------------------------------------------------------- 1 | const cssTree = require('css-tree') 2 | 3 | module.exports = { 4 | preprocess: function preprocess(src, filepath, config, attrs) { 5 | return `${src}\n .g{width: 10px}` 6 | }, 7 | postprocess: function postprocess(src, filepath, config, attrs) { 8 | const ast = cssTree.parse(src) 9 | const obj = cssTree 10 | .findAll(ast, node => node.type === 'ClassSelector') 11 | .reduce((acc, cssNode) => { 12 | acc[cssNode.name] = cssNode.name 13 | 14 | return acc 15 | }, {}) 16 | 17 | if (!attrs.themed) { 18 | return JSON.stringify(obj) 19 | } 20 | 21 | return JSON.stringify({ 22 | light: obj, 23 | dark: obj 24 | }) 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /e2e/2.x/custom-transformers/test.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import Scss from './components/Scss.vue' 3 | 4 | test('processes SCSS using user specified post transforms', () => { 5 | const wrapper = mount(Scss) 6 | expect(wrapper.vm.$style.light.a).toBeUndefined() 7 | expect(wrapper.vm.$style.light.f).toEqual('f') 8 | expect(wrapper.vm.$style.dark.f).toEqual('f') 9 | expect(wrapper.vm.$style.dark.g).toEqual('g') 10 | }) 11 | 12 | test('processes SCSS using user specified pre transforms', () => { 13 | const wrapper = mount(Scss) 14 | expect(wrapper.vm.$style.g).toEqual('g') 15 | }) 16 | -------------------------------------------------------------------------------- /e2e/2.x/sass-importer/entry/babel-transformer.js: -------------------------------------------------------------------------------- 1 | const { createTransformer } = require('babel-jest').default 2 | module.exports = createTransformer({ 3 | presets: ['@babel/preset-env'] 4 | }) 5 | -------------------------------------------------------------------------------- /e2e/2.x/sass-importer/entry/components/Entry.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 25 | -------------------------------------------------------------------------------- /e2e/2.x/sass-importer/entry/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-sass-importer-entry", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "scripts": { 7 | "test": "jest --no-cache --coverage test.js" 8 | }, 9 | "dependencies": { 10 | "vue": "^2.7.7", 11 | "vue-template-compiler": "^2.7.7", 12 | "vue2-sass-importer-lib": "file:../lib", 13 | "vue2-sass-importer-sass-lib": "file:../sass-lib-v2" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.9.0", 17 | "@babel/preset-env": "^7.9.0", 18 | "@vue/vue2-jest": "^29.0.0", 19 | "@vue/test-utils": "^1.1.0", 20 | "babel-jest": "29.x", 21 | "jest": "29.x", 22 | "jest-environment-jsdom": "29.x", 23 | "postcss": "^7.0.13", 24 | "postcss-color-function": "^4.0.1", 25 | "sass": "^1.23.7" 26 | }, 27 | "jest": { 28 | "testEnvironment": "jsdom", 29 | "moduleFileExtensions": [ 30 | "js", 31 | "json", 32 | "vue" 33 | ], 34 | "transformIgnorePatterns": [ 35 | "/node_modules/.*(? { 5 | const wrapper = mount(Entry) 6 | expect(wrapper).toBeDefined() 7 | }) 8 | -------------------------------------------------------------------------------- /e2e/2.x/sass-importer/lib/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | -------------------------------------------------------------------------------- /e2e/2.x/sass-importer/lib/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-sass-importer-lib", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "main": "index.vue", 7 | "files": [ 8 | "index.vue" 9 | ], 10 | "scripts": { 11 | "test": "echo 'No tests found.'" 12 | }, 13 | "dependencies": { 14 | "vue2-sass-importer-sass-lib": "file:../sass-lib-v1" 15 | }, 16 | "peerDependencies": { 17 | "vue": "^2.7.7" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /e2e/2.x/sass-importer/sass-lib-v1/index.scss: -------------------------------------------------------------------------------- 1 | @mixin my-v1-mixin { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /e2e/2.x/sass-importer/sass-lib-v1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-sass-importer-sass-lib", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "files": [ 7 | "index.scss" 8 | ], 9 | "scripts": { 10 | "test": "echo 'No tests found.'" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /e2e/2.x/sass-importer/sass-lib-v2/index.scss: -------------------------------------------------------------------------------- 1 | @mixin my-v2-mixin { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /e2e/2.x/sass-importer/sass-lib-v2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-sass-importer-sass-lib", 3 | "version": "2.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "files": [ 7 | "index.scss" 8 | ], 9 | "scripts": { 10 | "test": "echo 'No tests found.'" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /e2e/2.x/style/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@babel/preset-env'] 3 | } 4 | -------------------------------------------------------------------------------- /e2e/2.x/style/colors.less: -------------------------------------------------------------------------------- 1 | @primary-color: "red"; 2 | -------------------------------------------------------------------------------- /e2e/2.x/style/colors.scss: -------------------------------------------------------------------------------- 1 | $primary-color: #333; 2 | -------------------------------------------------------------------------------- /e2e/2.x/style/components/External.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /e2e/2.x/style/components/Less.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 19 | -------------------------------------------------------------------------------- /e2e/2.x/style/components/PostCss.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 26 | 27 | 32 | -------------------------------------------------------------------------------- /e2e/2.x/style/components/Sass.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | 12 | 16 | 17 | 21 | -------------------------------------------------------------------------------- /e2e/2.x/style/components/Scss.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 19 | 20 | 25 | 26 | 31 | -------------------------------------------------------------------------------- /e2e/2.x/style/components/Stylus.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /e2e/2.x/style/components/relative/resource.styl: -------------------------------------------------------------------------------- 1 | standard-space = 11px -------------------------------------------------------------------------------- /e2e/2.x/style/components/styles/external.css: -------------------------------------------------------------------------------- 1 | .testClass { 2 | background-color: red; 3 | } 4 | -------------------------------------------------------------------------------- /e2e/2.x/style/components/styles/less-a.less: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | .c { 3 | color: @primary-color; 4 | } 5 | .d { 6 | background-color: @primary-color; 7 | } 8 | -------------------------------------------------------------------------------- /e2e/2.x/style/components/styles/sass-a.sass: -------------------------------------------------------------------------------- 1 | @import "./sass-b" 2 | 3 | .a 4 | background-color: blue 5 | -------------------------------------------------------------------------------- /e2e/2.x/style/components/styles/sass-b.sass: -------------------------------------------------------------------------------- 1 | .b 2 | background-color: blue 3 | -------------------------------------------------------------------------------- /e2e/2.x/style/components/styles/scss-a.scss: -------------------------------------------------------------------------------- 1 | @import "./scss-b"; 2 | 3 | .a { 4 | background-color: blue 5 | } 6 | -------------------------------------------------------------------------------- /e2e/2.x/style/components/styles/scss-b.scss: -------------------------------------------------------------------------------- 1 | .b { 2 | background-color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /e2e/2.x/style/jest.config.js: -------------------------------------------------------------------------------- 1 | const os = require('node:os') 2 | 3 | /** @type {import('@jest/types').Config.InitialOptions} */ 4 | module.exports = { 5 | testEnvironment: 'jsdom', 6 | moduleFileExtensions: ['js', 'json', 'vue'], 7 | transform: { 8 | '^.+\\.js$': 'babel-jest', 9 | '^.+\\.vue$': '@vue/vue2-jest' 10 | }, 11 | moduleNameMapper: { 12 | '^~tmp/(.*)': `${os.tmpdir()}/$1`, 13 | '^~?__styles/(.*)$': '/components/styles/$1' 14 | }, 15 | globals: { 16 | 'vue-jest': { 17 | resources: { 18 | scss: ['variables.scss'], 19 | less: ['variables.less'] 20 | } 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /e2e/2.x/style/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-style", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "scripts": { 7 | "test": "node setup.js && jest --no-cache test.js" 8 | }, 9 | "dependencies": { 10 | "vue": "^2.7.7", 11 | "vue-template-compiler": "^2.7.7" 12 | }, 13 | "devDependencies": { 14 | "@babel/core": "^7.9.0", 15 | "@babel/preset-env": "^7.9.0", 16 | "@vue/test-utils": "^1.1.0", 17 | "@vue/vue2-jest": "^29.0.0", 18 | "jest": "29.x", 19 | "jest-environment-jsdom": "29.x", 20 | "less": "^3.9.0", 21 | "postcss": "^7.0.13", 22 | "sass": "^1.23.7", 23 | "stylus": "^0.54.5" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /e2e/2.x/style/setup.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const os = require('node:os') 3 | 4 | const testDir = '../../../node_modules/vue-jest-test' 5 | 6 | if (!fs.existsSync(testDir)) { 7 | fs.mkdirSync(testDir) 8 | } 9 | 10 | fs.openSync(`${os.tmpdir()}/absolute.scss`, 'w') 11 | fs.openSync(`${testDir}/_partial.scss`, 'w') 12 | fs.openSync(`${testDir}/foo.bar.scss`, 'w') 13 | fs.openSync(`${testDir}/baz.css`, 'w') 14 | fs.openSync(`${testDir}/qux.sass`, 'w') 15 | -------------------------------------------------------------------------------- /e2e/2.x/style/test.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import Stylus from './components/Stylus.vue' 3 | import Scss from './components/Scss.vue' 4 | import Sass from './components/Sass.vue' 5 | import Less from './components/Less.vue' 6 | import PostCss from './components/PostCss.vue' 7 | import External from './components/External.vue' 8 | 9 | test('processes Less', () => { 10 | const wrapper = mount(Less) 11 | expect(wrapper.element.tagName).toBe('DIV') 12 | expect(wrapper.vm.$style.a).toEqual('a') 13 | }) 14 | 15 | test('processes PostCSS', () => { 16 | const wrapper = mount(PostCss) 17 | expect(wrapper.element.tagName).toBe('SECTION') 18 | expect(wrapper.vm.$style.a).toEqual('a') 19 | expect(wrapper.vm.$style.b).toEqual('b') 20 | }) 21 | 22 | test('processes Sass', () => { 23 | const wrapper = mount(Sass) 24 | expect(wrapper.vm.$style.a).toEqual('a') 25 | expect(wrapper.vm.$style.b).toEqual('b') 26 | expect(wrapper.vm.$style.c).toEqual('c') 27 | expect(wrapper.vm.$style.light).toBeUndefined() 28 | }) 29 | 30 | test('processes SCSS with resources', () => { 31 | const wrapper = mount(Scss) 32 | expect(wrapper.vm.$style.a).toEqual('a') 33 | expect(wrapper.vm.$style.b).toEqual('b') 34 | expect(wrapper.vm.$style.c).toEqual('c') 35 | }) 36 | 37 | test('process Stylus', () => { 38 | const wrapper = mount(Stylus) 39 | expect(wrapper.vm).toBeTruthy() 40 | expect(wrapper.vm.css.a).toEqual('a') 41 | expect(wrapper.vm.$style.b).toEqual('b') 42 | }) 43 | 44 | test('process External', () => { 45 | const wrapper = mount(External) 46 | expect(wrapper.vm).toBeTruthy() 47 | expect(wrapper.vm.$style.testClass).toEqual('testClass') 48 | expect(wrapper.vm.$style2.testClass).toEqual('testClass') 49 | expect(wrapper.vm.$style3.testClass).toEqual('testClass') 50 | expect(wrapper.vm.css.a).toEqual('a') 51 | }) 52 | -------------------------------------------------------------------------------- /e2e/2.x/style/variables.less: -------------------------------------------------------------------------------- 1 | @import "./colors.less"; 2 | 3 | @font-size: 16px; 4 | -------------------------------------------------------------------------------- /e2e/2.x/style/variables.scss: -------------------------------------------------------------------------------- 1 | @import './colors.scss'; 2 | 3 | $font-size: 16px; 4 | -------------------------------------------------------------------------------- /e2e/3.x/babel-in-package/components/Basic.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 17 | 22 | 23 | 48 | -------------------------------------------------------------------------------- /e2e/3.x/babel-in-package/components/Coffee.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /e2e/3.x/babel-in-package/components/Tsx.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /e2e/3.x/babel-in-package/components/TypeScript.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | -------------------------------------------------------------------------------- /e2e/3.x/babel-in-package/components/TypeScriptChild.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /e2e/3.x/babel-in-package/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-babel-in-package", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "scripts": { 7 | "test": "jest --no-cache test.js" 8 | }, 9 | "dependencies": { 10 | "vue": "^3.2.22" 11 | }, 12 | "devDependencies": { 13 | "@babel/core": "^7.9.0", 14 | "@babel/preset-env": "^7.9.0", 15 | "@vue/babel-plugin-jsx": "^1.1.5", 16 | "@vue/vue3-jest": "^29.0.0", 17 | "coffeescript": "^2.3.2", 18 | "jest": "29.x", 19 | "jest-environment-jsdom": "29.x", 20 | "ts-jest": "^29.0.0-next.0", 21 | "typescript": "^4.6.4" 22 | }, 23 | "jest": { 24 | "testEnvironment": "jsdom", 25 | "moduleFileExtensions": [ 26 | "js", 27 | "json", 28 | "vue" 29 | ], 30 | "transform": { 31 | "^.+\\.js$": "babel-jest", 32 | "^.+\\.vue$": "@vue/vue3-jest" 33 | } 34 | }, 35 | "babel": { 36 | "presets": [ 37 | "@babel/env" 38 | ], 39 | "plugins": [ 40 | "@vue/babel-plugin-jsx" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /e2e/3.x/babel-in-package/test.js: -------------------------------------------------------------------------------- 1 | import { createApp, h } from 'vue' 2 | 3 | import TypeScript from './components/TypeScript.vue' 4 | import Basic from './components/Basic.vue' 5 | import Coffee from './components/Coffee.vue' 6 | import Tsx from './components/Tsx.vue' 7 | 8 | function mount(Component, props, slots) { 9 | document.getElementsByTagName('html')[0].innerHTML = '' 10 | const el = document.createElement('div') 11 | el.id = 'app' 12 | document.body.appendChild(el) 13 | const Parent = { 14 | render() { 15 | return h(Component, props, slots) 16 | } 17 | } 18 | createApp(Parent).mount(el) 19 | } 20 | 21 | test('processes .vue files', () => { 22 | mount(Basic) 23 | expect(document.querySelector('h1').textContent).toBe( 24 | 'Welcome to Your Vue.js App' 25 | ) 26 | }) 27 | 28 | test('processes .vue file with lang set to coffee', () => { 29 | mount(Coffee) 30 | expect(document.querySelector('h1').textContent).toBe('Coffee') 31 | }) 32 | 33 | test('processes .vue files with lang set to typescript', () => { 34 | mount(TypeScript) 35 | expect(document.querySelector('#parent').textContent).toBe('Parent') 36 | expect(document.querySelector('#child').textContent).toBe('Child') 37 | }) 38 | 39 | test('processes .vue files with lang set to tsx(typescript)', () => { 40 | mount(Tsx) 41 | expect(document.querySelector('div').textContent).toContain('tsx components') 42 | }) 43 | -------------------------------------------------------------------------------- /e2e/3.x/babel-in-package/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "es6"], 5 | "module": "ES2015", 6 | "moduleResolution": "node", 7 | "types": ["vue-typescript-import-dts", "node"], 8 | "isolatedModules": false, 9 | "experimentalDecorators": true, 10 | "noImplicitAny": true, 11 | "noImplicitThis": true, 12 | "strictNullChecks": true, 13 | "removeComments": true, 14 | "emitDecoratorMetadata": true, 15 | "suppressImplicitAnyIndexErrors": true, 16 | "allowSyntheticDefaultImports": true, 17 | "sourceMap": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /e2e/3.x/basic/__snapshots__/test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`generates source maps for .vue files 1`] = ` 4 | ""use strict"; 5 | 6 | Object.defineProperty(exports, "__esModule", { 7 | value: true 8 | }); 9 | exports["default"] = void 0; 10 | var _default = { 11 | name: 'basic', 12 | computed: { 13 | headingClasses: function headingClasses() { 14 | return { 15 | red: this.isCrazy, 16 | blue: !this.isCrazy, 17 | shadow: this.isCrazy 18 | }; 19 | } 20 | }, 21 | data: function data() { 22 | return { 23 | msg: 'Welcome to Your Vue.js App', 24 | isCrazy: false 25 | }; 26 | }, 27 | methods: { 28 | toggleClass: function toggleClass() { 29 | this.isCrazy = !this.isCrazy; 30 | } 31 | } 32 | }; 33 | exports["default"] = _default; 34 | "use strict"; 35 | 36 | Object.defineProperty(exports, "__esModule", { 37 | value: true 38 | }); 39 | exports.render = render; 40 | 41 | var _vue = require("vue"); 42 | 43 | var _hoisted_1 = { 44 | "class": "hello" 45 | }; 46 | 47 | function render(_ctx, _cache) { 48 | return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("h1", { 49 | "class": (0, _vue.normalizeClass)(_ctx.headingClasses) 50 | }, (0, _vue.toDisplayString)(_ctx.msg), 3 51 | /* TEXT, CLASS */ 52 | )]); 53 | };exports.default = {...exports.default, render};;exports.default = {...exports.default, __cssModules: {"css":{"testA":"testA"},"$style":{"testB":"testB"}}}" 54 | `; 55 | 56 | exports[`generates source maps using src attributes 1`] = ` 57 | ""use strict"; 58 | 59 | Object.defineProperty(exports, "__esModule", { 60 | value: true 61 | }); 62 | exports["default"] = void 0; 63 | var _default = { 64 | name: 'basic', 65 | computed: { 66 | headingClasses: function headingClasses() { 67 | return { 68 | red: this.isCrazy, 69 | blue: !this.isCrazy, 70 | shadow: this.isCrazy 71 | }; 72 | } 73 | }, 74 | data: function data() { 75 | return { 76 | msg: 'Welcome to Your Vue.js App', 77 | isCrazy: false 78 | }; 79 | }, 80 | methods: { 81 | toggleClass: function toggleClass() { 82 | this.isCrazy = !this.isCrazy; 83 | } 84 | } 85 | }; 86 | exports["default"] = _default; 87 | "use strict"; 88 | 89 | Object.defineProperty(exports, "__esModule", { 90 | value: true 91 | }); 92 | exports.render = render; 93 | 94 | var _vue = require("vue"); 95 | 96 | var _hoisted_1 = { 97 | "class": "hello" 98 | }; 99 | 100 | function render(_ctx, _cache) { 101 | return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("h1", { 102 | "class": (0, _vue.normalizeClass)(_ctx.headingClasses) 103 | }, (0, _vue.toDisplayString)(_ctx.msg), 3 104 | /* TEXT, CLASS */ 105 | )]); 106 | };exports.default = {...exports.default, render};" 107 | `; 108 | -------------------------------------------------------------------------------- /e2e/3.x/basic/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@babel/preset-env'], 3 | plugins: ['transform-vue-jsx'] 4 | } 5 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/Basic.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 17 | 22 | 23 | 48 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/BasicSrc.html: -------------------------------------------------------------------------------- 1 |
2 |

{{ msg }}

3 |
-------------------------------------------------------------------------------- /e2e/3.x/basic/components/BasicSrc.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'basic', 3 | computed: { 4 | headingClasses: function headingClasses() { 5 | return { 6 | red: this.isCrazy, 7 | blue: !this.isCrazy, 8 | shadow: this.isCrazy 9 | } 10 | } 11 | }, 12 | data: function data() { 13 | return { 14 | msg: 'Welcome to Your Vue.js App', 15 | isCrazy: false 16 | } 17 | }, 18 | methods: { 19 | toggleClass: function toggleClass() { 20 | this.isCrazy = !this.isCrazy 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/BasicSrc.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/ClassComponent.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 28 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/ClassComponentProperty.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 21 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/ClassComponentWithMixin.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/ClassMixin.ts: -------------------------------------------------------------------------------- 1 | import { Vue } from 'vue-class-component' 2 | 3 | export default class ClassMixin extends Vue { 4 | message = 'Hello world!' 5 | } 6 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/Coffee.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/CoffeeScript.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/CompilerDirective.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/Constructor.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/ExtendedTsConfig.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 35 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/FunctionalRenderFn.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/FunctionalSFC.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/FunctionalSFCParent.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/Jade.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/Jsx.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/ModuleRequiringEsModuleInterop.js: -------------------------------------------------------------------------------- 1 | module.exports = () => false 2 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/NamedExport.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/NoScript.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/Pug.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/PugBase.pug: -------------------------------------------------------------------------------- 1 | div(class='pug-base') 2 | block component -------------------------------------------------------------------------------- /e2e/3.x/basic/components/PugRelativeExtends.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/RenderFunction.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/ScriptAndScriptSetup.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | 24 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/ScriptSetup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/ScriptSetupSugarRef.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/SourceMapsSrc.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/TsSrc.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'basic', 3 | computed: { 4 | headingClasses: function headingClasses() { 5 | return { 6 | red: this.isCrazy, 7 | blue: !this.isCrazy, 8 | shadow: this.isCrazy 9 | } 10 | } 11 | }, 12 | data: function data() { 13 | return { 14 | msg: 'Welcome to Your Vue.js App', 15 | isCrazy: false 16 | } 17 | }, 18 | methods: { 19 | toggleClass: function toggleClass() { 20 | this.isCrazy = !this.isCrazy 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/TsSrc.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/TypeScript.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/TypeScriptChild.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/coffee.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount, mount } from '@vue/test-utils' 2 | import Coffee from './resources/Coffee.vue' 3 | import CoffeeScript from './resources/CoffeeScript.vue' 4 | import CoffeeES6 from './resources/CoffeeES6.vue' 5 | import CoffeeScriptES6 from './resources/CoffeeScriptES6.vue' 6 | 7 | describe('Test CoffeeScript - coffee.spec.js', () => { 8 | test('processes .vue file with lang set to coffee', () => { 9 | shallowMount(Coffee) 10 | }) 11 | 12 | test('processes .vue file with lang set to coffeescript', () => { 13 | shallowMount(CoffeeScript) 14 | }) 15 | 16 | test('processes .vue file with lang set to coffee (ES6)', () => { 17 | shallowMount(CoffeeES6) 18 | }) 19 | 20 | test('processes .vue file with lang set to coffeescript (ES6)', () => { 21 | shallowMount(CoffeeScriptES6) 22 | }) 23 | 24 | test('processes .vue file with lang set to coffeescript (ES6)', () => { 25 | const wrapper = mount(CoffeeScriptES6) 26 | expect(typeof wrapper).toBe('object') 27 | }) 28 | }) 29 | -------------------------------------------------------------------------------- /e2e/3.x/basic/components/relative/PugRelativeBase.pug: -------------------------------------------------------------------------------- 1 | div(class='pug-relative-base') 2 | block component -------------------------------------------------------------------------------- /e2e/3.x/basic/jest.config.js: -------------------------------------------------------------------------------- 1 | const vTestDirective = require('./v-test-directive') 2 | 3 | module.exports = { 4 | testEnvironment: 'jsdom', 5 | moduleFileExtensions: ['js', 'json', 'vue', 'ts'], 6 | transform: { 7 | '^.+\\.ts$': 'ts-jest', 8 | '^.+\\.js$': 'babel-jest', 9 | '^.+\\.vue$': '@vue/vue3-jest' 10 | }, 11 | moduleNameMapper: { 12 | '^~?__styles/(.*)$': '/components/styles/$1' 13 | }, 14 | globals: { 15 | 'vue-jest': { 16 | pug: { 17 | basedir: './' 18 | }, 19 | compilerOptions: { 20 | directiveTransforms: { 21 | test: vTestDirective 22 | } 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /e2e/3.x/basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-basic", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "scripts": { 7 | "test": "jest --no-cache --coverage test.js" 8 | }, 9 | "dependencies": { 10 | "vue": "^3.2.22" 11 | }, 12 | "devDependencies": { 13 | "@babel/core": "^7.9.0", 14 | "@babel/preset-env": "^7.9.0", 15 | "@vue/vue3-jest": "^29.0.0", 16 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 17 | "babel-plugin-syntax-jsx": "^6.18.0", 18 | "babel-plugin-transform-vue-jsx": "^3.7.0", 19 | "coffeescript": "^2.3.2", 20 | "jade": "^1.11.0", 21 | "jest": "29.x", 22 | "jest-environment-jsdom": "29.x", 23 | "pug": "^2.0.3", 24 | "ts-jest": "^29.0.0-next.0", 25 | "typescript": "^4.6.4", 26 | "vue-class-component": "^8.0.0-beta.4", 27 | "vue-property-decorator": "^10.0.0-rc.3" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /e2e/3.x/basic/test.js: -------------------------------------------------------------------------------- 1 | import { createApp, h, nextTick } from 'vue' 2 | import { resolve } from 'path' 3 | import { readFileSync } from 'fs' 4 | 5 | import BasicSrc from './components/BasicSrc.vue' 6 | import TsSrc from './components/TsSrc.vue' 7 | import Pug from './components/Pug.vue' 8 | import Coffee from './components/Coffee.vue' 9 | import Basic from './components/Basic.vue' 10 | import ClassComponent from './components/ClassComponent.vue' 11 | import ClassComponentWithMixin from './components/ClassComponentWithMixin.vue' 12 | import ClassComponentProperty from './components/ClassComponentProperty.vue' 13 | import TypeScript from './components/TypeScript.vue' 14 | import jestVue from '@vue/vue3-jest' 15 | import RenderFunction from './components/RenderFunction.vue' 16 | import FunctionalSFC from './components/FunctionalSFC.vue' 17 | import CoffeeScript from './components/CoffeeScript.vue' 18 | import FunctionalSFCParent from './components/FunctionalSFCParent.vue' 19 | import NoScript from './components/NoScript.vue' 20 | import PugRelative from './components/PugRelativeExtends.vue' 21 | import { randomExport } from './components/NamedExport.vue' 22 | import ScriptSetup from './components/ScriptSetup.vue' 23 | import ScriptSetupSugarRef from './components/ScriptSetupSugarRef.vue' 24 | import FunctionalRenderFn from './components/FunctionalRenderFn.vue' 25 | import CompilerDirective from './components/CompilerDirective.vue' 26 | import ExtendedTsConfig from './components/ExtendedTsConfig.vue' 27 | import ScriptAndScriptSetup from './components/ScriptAndScriptSetup.vue' 28 | 29 | // TODO: JSX for Vue 3? TSX? 30 | import Jsx from './components/Jsx.vue' 31 | 32 | function mount(Component, props, slots) { 33 | document.getElementsByTagName('html')[0].innerHTML = '' 34 | const el = document.createElement('div') 35 | el.id = 'app' 36 | document.body.appendChild(el) 37 | const Parent = { 38 | render() { 39 | return h(Component, props, slots) 40 | } 41 | } 42 | const app = createApp(Parent) 43 | app.directive('test', el => el.setAttribute('data-test', 'value')) 44 | app.mount(el) 45 | } 46 | 47 | test('supports 10 | 11 | 12 | { 13 | "en": { 14 | "hello": "Hello!" 15 | }, 16 | "ja": { 17 | "hello": "こんにちは！" 18 | } 19 | } 20 | 21 | -------------------------------------------------------------------------------- /e2e/3.x/custom-block/components/Multiple.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | 12 | { 13 | "en": { 14 | "hello": "Hello!" 15 | }, 16 | "ja": { 17 | "hello": "こんにちは！" 18 | } 19 | } 20 | 21 | 22 | 23 | { 24 | "foo": "foo" 25 | } 26 | 27 | -------------------------------------------------------------------------------- /e2e/3.x/custom-block/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-custom-block", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "scripts": { 7 | "test": "jest --no-cache --coverage test.js" 8 | }, 9 | "dependencies": { 10 | "vue": "^3.0.3" 11 | }, 12 | "devDependencies": { 13 | "@babel/core": "^7.9.0", 14 | "@babel/preset-env": "^7.9.0", 15 | "@vue/compiler-sfc": "^3.0.3", 16 | "@vue/vue3-jest": "^29.0.0", 17 | "jest": "29.x", 18 | "jest-environment-jsdom": "29.x" 19 | }, 20 | "jest": { 21 | "moduleFileExtensions": [ 22 | "js", 23 | "json", 24 | "vue" 25 | ], 26 | "transform": { 27 | "^.+\\.js$": "babel-jest", 28 | "^.+\\.vue$": "@vue/vue3-jest" 29 | }, 30 | "moduleNameMapper": { 31 | "^~?__styles/(.*)$": "/components/styles/$1" 32 | }, 33 | "globals": { 34 | "vue-jest": { 35 | "transform": { 36 | "custom": "./transformer.js" 37 | } 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /e2e/3.x/custom-block/test.js: -------------------------------------------------------------------------------- 1 | import Basic from './components/Basic.vue' 2 | import Multiple from './components/Multiple.vue' 3 | 4 | test('Basic', () => { 5 | expect(Basic.__custom).toMatchObject([ 6 | { 7 | en: { 8 | hello: 'Hello!' 9 | }, 10 | ja: { 11 | hello: 'こんにちは！' 12 | } 13 | } 14 | ]) 15 | expect(Basic.__custom).toMatchSnapshot() 16 | }) 17 | 18 | test('Multiple blocks', () => { 19 | expect(Multiple.__custom).toMatchObject([ 20 | { 21 | en: { 22 | hello: 'Hello!' 23 | }, 24 | ja: { 25 | hello: 'こんにちは！' 26 | } 27 | }, 28 | { 29 | foo: 'foo' 30 | } 31 | ]) 32 | expect(Multiple.__custom).toMatchSnapshot() 33 | }) 34 | -------------------------------------------------------------------------------- /e2e/3.x/custom-block/transformer.js: -------------------------------------------------------------------------------- 1 | function convert(content) { 2 | return JSON.stringify(JSON.parse(content)) 3 | .replace(/\u2028/g, '\\u2028') // LINE SEPARATOR 4 | .replace(/\u2029/g, '\\u2029') // PARAGRAPH SEPARATOR 5 | .replace(/\\/g, '\\\\') 6 | .replace(/'/g, "\\'") 7 | } 8 | 9 | module.exports = { 10 | process({ blocks, componentNamespace, filename, config }) { 11 | const ret = blocks.reduce((codes, block) => { 12 | codes.push( 13 | `${componentNamespace}.__custom = ${componentNamespace}.__custom || [];${componentNamespace}.__custom.push(${convert( 14 | block.content 15 | )});` 16 | ) 17 | return codes 18 | }, []) 19 | return ret 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /e2e/3.x/custom-transformers/babel-transformer.js: -------------------------------------------------------------------------------- 1 | const { createTransformer } = require('babel-jest').default 2 | module.exports = createTransformer({ 3 | presets: ['@babel/preset-env'] 4 | }) 5 | -------------------------------------------------------------------------------- /e2e/3.x/custom-transformers/components/Scss.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | 19 | -------------------------------------------------------------------------------- /e2e/3.x/custom-transformers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-custom-transformers", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "scripts": { 7 | "test": "jest --no-cache --coverage test.js" 8 | }, 9 | "dependencies": { 10 | "vue": "^3.2.22" 11 | }, 12 | "devDependencies": { 13 | "@babel/core": "^7.9.0", 14 | "@babel/preset-env": "^7.9.0", 15 | "@vue/test-utils": "^2.0.0-rc.10", 16 | "@vue/vue3-jest": "^29.0.0", 17 | "babel-jest": "29.x", 18 | "css-tree": "^2.0.1", 19 | "jest": "29.x", 20 | "jest-environment-jsdom": "29.x", 21 | "postcss": "^7.0.13", 22 | "postcss-color-function": "^4.0.1", 23 | "sass": "^1.23.7" 24 | }, 25 | "jest": { 26 | "testEnvironment": "jsdom", 27 | "moduleFileExtensions": [ 28 | "js", 29 | "json", 30 | "vue" 31 | ], 32 | "transform": { 33 | "^.+\\.js$": "./babel-transformer.js", 34 | "^.+\\.vue$": "@vue/vue3-jest" 35 | }, 36 | "moduleNameMapper": { 37 | "^~?__styles/(.*)$": "/components/styles/$1" 38 | }, 39 | "globals": { 40 | "vue-jest": { 41 | "transform": { 42 | "^scss$": "./scss-transformer.js", 43 | "^pcss|postcss$": "./pcss-transformer.js", 44 | "^js$": "./babel-transformer.js" 45 | } 46 | } 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /e2e/3.x/custom-transformers/pcss-transformer.js: -------------------------------------------------------------------------------- 1 | const postcss = require('postcss') 2 | var colorFunction = require('postcss-color-function') 3 | module.exports = { 4 | process: function(content, filepath, config, attrs) { 5 | return postcss([colorFunction()]).process(content).css 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /e2e/3.x/custom-transformers/scss-transformer.js: -------------------------------------------------------------------------------- 1 | const cssTree = require('css-tree') 2 | 3 | module.exports = { 4 | preprocess: function preprocess(src, filepath, config, attrs) { 5 | return `${src}\n .g{width: 10px}` 6 | }, 7 | postprocess: function postprocess(src, filepath, config, attrs) { 8 | const ast = cssTree.parse(src) 9 | const obj = cssTree 10 | .findAll(ast, node => node.type === 'ClassSelector') 11 | .reduce((acc, cssNode) => { 12 | acc[cssNode.name] = cssNode.name 13 | 14 | return acc 15 | }, {}) 16 | 17 | if (!attrs.themed) { 18 | return JSON.stringify(obj) 19 | } 20 | 21 | return JSON.stringify({ 22 | light: obj, 23 | dark: obj 24 | }) 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /e2e/3.x/custom-transformers/test.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import Scss from './components/Scss.vue' 3 | 4 | test('processes SCSS using user specified post transforms', () => { 5 | const wrapper = mount(Scss) 6 | expect(wrapper.vm.$style.light.a).toBeUndefined() 7 | expect(wrapper.vm.$style.light.f).toEqual('f') 8 | expect(wrapper.vm.$style.dark.f).toEqual('f') 9 | expect(wrapper.vm.$style.dark.g).toEqual('g') 10 | }) 11 | 12 | test('processes SCSS using user specified pre transforms', () => { 13 | const wrapper = mount(Scss) 14 | expect(wrapper.vm.$style.g).toEqual('g') 15 | }) 16 | -------------------------------------------------------------------------------- /e2e/3.x/javascript/components/Basic.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 17 | 22 | 23 | 48 | -------------------------------------------------------------------------------- /e2e/3.x/javascript/components/Coffee.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /e2e/3.x/javascript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-javascript", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "scripts": { 7 | "test": "jest --no-cache test.js" 8 | }, 9 | "dependencies": { 10 | "vue": "^3.2.22" 11 | }, 12 | "devDependencies": { 13 | "@babel/core": "^7.9.0", 14 | "@babel/preset-env": "^7.9.0", 15 | "@vue/vue3-jest": "^29.0.0", 16 | "coffeescript": "^2.3.2", 17 | "jest": "29.x", 18 | "jest-environment-jsdom": "29.x" 19 | }, 20 | "jest": { 21 | "testEnvironment": "jsdom", 22 | "moduleFileExtensions": [ 23 | "js", 24 | "json", 25 | "vue" 26 | ], 27 | "transform": { 28 | "^.+\\.js$": "babel-jest", 29 | "^.+\\.vue$": "@vue/vue3-jest" 30 | } 31 | }, 32 | "babel": { 33 | "presets": [ 34 | "@babel/env" 35 | ] 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /e2e/3.x/javascript/test.js: -------------------------------------------------------------------------------- 1 | import { createApp, h } from 'vue' 2 | 3 | import Basic from './components/Basic.vue' 4 | import Coffee from './components/Coffee.vue' 5 | 6 | function mount(Component, props, slots) { 7 | document.getElementsByTagName('html')[0].innerHTML = '' 8 | const el = document.createElement('div') 9 | el.id = 'app' 10 | document.body.appendChild(el) 11 | const Parent = { 12 | render() { 13 | return h(Component, props, slots) 14 | } 15 | } 16 | createApp(Parent).mount(el) 17 | } 18 | 19 | test('processes .vue files', () => { 20 | mount(Basic) 21 | expect(document.querySelector('h1').textContent).toBe( 22 | 'Welcome to Your Vue.js App' 23 | ) 24 | }) 25 | 26 | test('processes .vue file with lang set to coffee', () => { 27 | mount(Coffee) 28 | expect(document.querySelector('h1').textContent).toBe('Coffee') 29 | }) 30 | -------------------------------------------------------------------------------- /e2e/3.x/sass-importer/entry/babel-transformer.js: -------------------------------------------------------------------------------- 1 | const { createTransformer } = require('babel-jest').default 2 | module.exports = createTransformer({ 3 | presets: ['@babel/preset-env'] 4 | }) 5 | -------------------------------------------------------------------------------- /e2e/3.x/sass-importer/entry/components/Entry.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 25 | -------------------------------------------------------------------------------- /e2e/3.x/sass-importer/entry/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-sass-importer-entry", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "scripts": { 7 | "test": "jest --no-cache --coverage test.js" 8 | }, 9 | "dependencies": { 10 | "vue": "^3.2.22", 11 | "vue3-sass-importer-lib": "file:../lib", 12 | "vue3-sass-importer-sass-lib": "file:../sass-lib-v2" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "^7.9.0", 16 | "@babel/preset-env": "^7.9.0", 17 | "@vue/test-utils": "^2.0.0-rc.10", 18 | "@vue/vue3-jest": "^29.0.0", 19 | "babel-jest": "29.x", 20 | "jest": "29.x", 21 | "jest-environment-jsdom": "29.x", 22 | "postcss": "^7.0.13", 23 | "postcss-color-function": "^4.0.1", 24 | "sass": "^1.23.7" 25 | }, 26 | "jest": { 27 | "testEnvironment": "jsdom", 28 | "moduleFileExtensions": [ 29 | "js", 30 | "json", 31 | "vue" 32 | ], 33 | "transformIgnorePatterns": [ 34 | "/node_modules/.*(? { 5 | const wrapper = mount(Entry) 6 | expect(wrapper).toBeDefined() 7 | }) 8 | -------------------------------------------------------------------------------- /e2e/3.x/sass-importer/lib/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | -------------------------------------------------------------------------------- /e2e/3.x/sass-importer/lib/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-sass-importer-lib", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "main": "index.vue", 7 | "files": [ 8 | "index.vue" 9 | ], 10 | "scripts": { 11 | "test": "echo 'No tests found.'" 12 | }, 13 | "dependencies": { 14 | "vue3-sass-importer-sass-lib": "file:../sass-lib-v1" 15 | }, 16 | "peerDependencies": { 17 | "vue": "^3.2.22" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /e2e/3.x/sass-importer/sass-lib-v1/index.scss: -------------------------------------------------------------------------------- 1 | @mixin my-v1-mixin { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /e2e/3.x/sass-importer/sass-lib-v1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-sass-importer-sass-lib", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "files": [ 7 | "index.scss" 8 | ], 9 | "scripts": { 10 | "test": "echo 'No tests found.'" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /e2e/3.x/sass-importer/sass-lib-v2/index.scss: -------------------------------------------------------------------------------- 1 | @mixin my-v2-mixin { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /e2e/3.x/sass-importer/sass-lib-v2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-sass-importer-sass-lib", 3 | "version": "2.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "files": [ 7 | "index.scss" 8 | ], 9 | "scripts": { 10 | "test": "echo 'No tests found.'" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /e2e/3.x/style/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@babel/preset-env'] 3 | } 4 | -------------------------------------------------------------------------------- /e2e/3.x/style/colors.less: -------------------------------------------------------------------------------- 1 | @primary-color: "red"; 2 | -------------------------------------------------------------------------------- /e2e/3.x/style/colors.scss: -------------------------------------------------------------------------------- 1 | $primary-color: #333; 2 | -------------------------------------------------------------------------------- /e2e/3.x/style/components/External.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /e2e/3.x/style/components/Less.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 22 | 23 | 32 | -------------------------------------------------------------------------------- /e2e/3.x/style/components/PostCss.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | 38 | 39 | 44 | -------------------------------------------------------------------------------- /e2e/3.x/style/components/Sass.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 23 | 24 | 30 | 31 | 35 | 36 | 40 | -------------------------------------------------------------------------------- /e2e/3.x/style/components/Scss.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 24 | 25 | 32 | 33 | 38 | 39 | 44 | -------------------------------------------------------------------------------- /e2e/3.x/style/components/Stylus.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | 21 | 28 | 29 | 34 | -------------------------------------------------------------------------------- /e2e/3.x/style/components/relative/resource.styl: -------------------------------------------------------------------------------- 1 | standard-space = 11px -------------------------------------------------------------------------------- /e2e/3.x/style/components/styles/external.css: -------------------------------------------------------------------------------- 1 | .testClass { 2 | background-color: red; 3 | } 4 | -------------------------------------------------------------------------------- /e2e/3.x/style/components/styles/less-a.less: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | .c { 3 | color: @primary-color; 4 | } 5 | .d { 6 | background-color: @primary-color; 7 | } 8 | -------------------------------------------------------------------------------- /e2e/3.x/style/components/styles/sass-a.sass: -------------------------------------------------------------------------------- 1 | @import "./sass-b" 2 | 3 | .a 4 | background-color: blue 5 | -------------------------------------------------------------------------------- /e2e/3.x/style/components/styles/sass-b.sass: -------------------------------------------------------------------------------- 1 | .b 2 | background-color: blue 3 | -------------------------------------------------------------------------------- /e2e/3.x/style/components/styles/scss-a.scss: -------------------------------------------------------------------------------- 1 | @import "./scss-b"; 2 | 3 | .a { 4 | background-color: blue 5 | } 6 | -------------------------------------------------------------------------------- /e2e/3.x/style/components/styles/scss-b.scss: -------------------------------------------------------------------------------- 1 | .b { 2 | background-color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /e2e/3.x/style/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-style", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "scripts": { 7 | "test": "jest --no-cache test.js" 8 | }, 9 | "dependencies": { 10 | "vue": "^3.2.22" 11 | }, 12 | "devDependencies": { 13 | "@babel/core": "^7.9.0", 14 | "@babel/preset-env": "^7.9.0", 15 | "@vue/test-utils": "^2.0.0-rc.10", 16 | "@vue/vue3-jest": "^29.0.0", 17 | "jest": "29.x", 18 | "jest-environment-jsdom": "29.x", 19 | "less": "^3.9.0", 20 | "postcss": "^7.0.13", 21 | "sass": "^1.23.7", 22 | "stylus": "^0.54.5" 23 | }, 24 | "jest": { 25 | "testEnvironment": "jsdom", 26 | "moduleFileExtensions": [ 27 | "js", 28 | "json", 29 | "vue" 30 | ], 31 | "transform": { 32 | "^.+\\.js$": "babel-jest", 33 | "^.+\\.vue$": "@vue/vue3-jest" 34 | }, 35 | "moduleNameMapper": { 36 | "^~?__styles/(.*)$": "/components/styles/$1" 37 | }, 38 | "globals": { 39 | "vue-jest": { 40 | "resources": { 41 | "scss": [ 42 | "variables.scss" 43 | ], 44 | "less": [ 45 | "variables.less" 46 | ] 47 | } 48 | } 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /e2e/3.x/style/test.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | 3 | import Less from './components/Less.vue' 4 | import Stylus from './components/Stylus.vue' 5 | import Scss from './components/Scss.vue' 6 | import Sass from './components/Sass.vue' 7 | import PostCss from './components/PostCss.vue' 8 | import External from './components/External.vue' 9 | 10 | test('processes Less', () => { 11 | const wrapper = mount(Less) 12 | expect(wrapper.vm.$style.a).toEqual('a') 13 | }) 14 | 15 | test('processes PostCSS', () => { 16 | const wrapper = mount(PostCss) 17 | expect(wrapper.vm.$style.c).toEqual('c') 18 | expect(wrapper.vm.$style.d).toEqual('d') 19 | }) 20 | 21 | test('processes Sass', () => { 22 | const wrapper = mount(Sass) 23 | expect(wrapper.vm.$style.a).toEqual('a') 24 | expect(wrapper.vm.$style.b).toEqual('b') 25 | expect(wrapper.vm.$style.c).toEqual('c') 26 | expect(wrapper.vm.$style.light).toBeUndefined() 27 | }) 28 | 29 | test('processes SCSS with resources', () => { 30 | const wrapper = mount(Scss) 31 | expect(wrapper.vm.$style.a).toEqual('a') 32 | expect(wrapper.vm.$style.b).toEqual('b') 33 | expect(wrapper.vm.$style.c).toEqual('c') 34 | }) 35 | 36 | test('process Stylus', () => { 37 | const wrapper = mount(Stylus) 38 | expect(wrapper.vm).toBeTruthy() 39 | expect(wrapper.vm.css.a).toEqual('a') 40 | expect(wrapper.vm.$style.b).toEqual('b') 41 | }) 42 | 43 | test('process External', () => { 44 | const wrapper = mount(External) 45 | expect(wrapper.vm).toBeTruthy() 46 | expect(wrapper.vm.$style.testClass).toEqual('testClass') 47 | expect(wrapper.vm.css.a).toEqual('a') 48 | }) 49 | -------------------------------------------------------------------------------- /e2e/3.x/style/variables.less: -------------------------------------------------------------------------------- 1 | @import "./colors.less"; 2 | 3 | @font-size: 16px; 4 | -------------------------------------------------------------------------------- /e2e/3.x/style/variables.scss: -------------------------------------------------------------------------------- 1 | @import './colors.scss'; 2 | 3 | $font-size: 16px; 4 | -------------------------------------------------------------------------------- /e2e/3.x/typescript-with-babel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-typescript-with-babel", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "scripts": { 7 | "test": "jest --no-cache ./sub-project/test.js" 8 | }, 9 | "dependencies": { 10 | "vue": "^3.2.22" 11 | }, 12 | "devDependencies": { 13 | "@babel/core": "^7.9.0", 14 | "@babel/preset-env": "^7.9.0", 15 | "@vue/vue3-jest": "^29.0.0", 16 | "jest": "29.x", 17 | "jest-environment-jsdom": "29.x", 18 | "typescript": "^4.6.4" 19 | }, 20 | "jest": { 21 | "testEnvironment": "jsdom", 22 | "globals": { 23 | "vue-jest": { 24 | "tsConfig": "./sub-project/tsconfig.json" 25 | } 26 | }, 27 | "moduleFileExtensions": [ 28 | "js", 29 | "json", 30 | "vue" 31 | ], 32 | "transform": { 33 | "^.+\\.js$": "babel-jest", 34 | "^.+\\.vue$": "@vue/vue3-jest" 35 | } 36 | }, 37 | "babel": { 38 | "presets": [ 39 | "@babel/env" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /e2e/3.x/typescript-with-babel/sub-project/components/Basic.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 17 | 22 | 23 | 49 | -------------------------------------------------------------------------------- /e2e/3.x/typescript-with-babel/sub-project/test.js: -------------------------------------------------------------------------------- 1 | import { createApp, h } from 'vue' 2 | 3 | import Basic from './components/Basic.vue' 4 | 5 | function mount(Component, props, slots) { 6 | document.getElementsByTagName('html')[0].innerHTML = '' 7 | const el = document.createElement('div') 8 | el.id = 'app' 9 | document.body.appendChild(el) 10 | const Parent = { 11 | render() { 12 | return h(Component, props, slots) 13 | } 14 | } 15 | createApp(Parent).mount(el) 16 | } 17 | 18 | test('processes .vue files', () => { 19 | mount(Basic) 20 | expect(document.querySelector('h1').textContent).toBe( 21 | 'Welcome to Your Vue.js App' 22 | ) 23 | }) 24 | -------------------------------------------------------------------------------- /e2e/3.x/typescript-with-babel/sub-project/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "es6"], 5 | "module": "es2015", 6 | "moduleResolution": "node", 7 | "types": ["vue-typescript-import-dts", "node"], 8 | "isolatedModules": false, 9 | "experimentalDecorators": true, 10 | "noImplicitAny": true, 11 | "noImplicitThis": true, 12 | "strictNullChecks": true, 13 | "removeComments": true, 14 | "emitDecoratorMetadata": true, 15 | "suppressImplicitAnyIndexErrors": true, 16 | "allowSyntheticDefaultImports": true, 17 | "sourceMap": true, 18 | "allowJs": true 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /e2e/3.x/typescript-with-compiler-options/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-typescript-with-compiler-options", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "scripts": { 7 | "test": "jest --no-cache ./src/test.ts" 8 | }, 9 | "dependencies": { 10 | "vue": "^3.2.22" 11 | }, 12 | "devDependencies": { 13 | "@types/jest": "16.0.10", 14 | "@vue/vue3-jest": "^29.0.0", 15 | "jest": "29.x", 16 | "jest-environment-jsdom": "29.x", 17 | "ts-jest": "^29.0.0-next.0", 18 | "typescript": "^4.6.4" 19 | }, 20 | "jest": { 21 | "testEnvironment": "jsdom", 22 | "moduleFileExtensions": [ 23 | "js", 24 | "ts", 25 | "json", 26 | "vue" 27 | ], 28 | "moduleNameMapper": { 29 | "^@/(.*)$": "/src/$1" 30 | }, 31 | "transform": { 32 | "^.+\\.ts$": "ts-jest", 33 | "^.+\\.vue$": "@vue/vue3-jest" 34 | }, 35 | "globals": { 36 | "vue-jest": { 37 | "compilerOptions": { 38 | "propsDestructureTransform": true 39 | } 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /e2e/3.x/typescript-with-compiler-options/src/components/PropsDestructureTransform.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /e2e/3.x/typescript-with-compiler-options/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import type { DefineComponent } from 'vue'; 3 | const component: DefineComponent<{}, {}, any>; 4 | export default component; 5 | } 6 | -------------------------------------------------------------------------------- /e2e/3.x/typescript-with-compiler-options/src/test.ts: -------------------------------------------------------------------------------- 1 | import { createApp, h } from 'vue' 2 | 3 | import PropsDestructureTransform from '@/components/PropsDestructureTransform.vue' 4 | 5 | function mount(Component: any) { 6 | document.getElementsByTagName('html')[0].innerHTML = '' 7 | const el = document.createElement('div') 8 | el.id = 'app' 9 | document.body.appendChild(el) 10 | const Parent = { 11 | render() { 12 | return h(Component) 13 | } 14 | } 15 | createApp(Parent).mount(el) 16 | } 17 | 18 | test('support additional compiler options like `propsDestructureTransform`', () => { 19 | // `propsDestructureTransform` is a new compiler option in v3.2.20 20 | // that allows to destructure props with default values and retain reactivity 21 | // The option is passed to the compiler via `globals.vue-jest.compilerOptions` of the Jest config in the package.json 22 | mount(PropsDestructureTransform) 23 | // if the option is properly passed, then the default value of the props is used 24 | expect(document.querySelector('h1')!.textContent).toBe('name') 25 | }) 26 | -------------------------------------------------------------------------------- /e2e/3.x/typescript-with-compiler-options/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "forceConsistentCasingInFileNames": true, 13 | "useDefineForClassFields": true, 14 | "sourceMap": true, 15 | "baseUrl": ".", 16 | "types": ["webpack-env", "jest"], 17 | "paths": { 18 | "@/*": ["src/*"] 19 | }, 20 | "lib": ["esnext", "dom", "dom.iterable", "scripthost"] 21 | }, 22 | "include": ["src/**/*.ts", "src/**/*.vue"], 23 | "exclude": ["node_modules"] 24 | } 25 | -------------------------------------------------------------------------------- /e2e/3.x/typescript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-typescript", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "private": true, 6 | "scripts": { 7 | "test": "jest --no-cache ./src/test.ts" 8 | }, 9 | "dependencies": { 10 | "vue": "^3.2.22" 11 | }, 12 | "devDependencies": { 13 | "@types/jest": "16.0.10", 14 | "@vue/vue3-jest": "^29.0.0", 15 | "jest": "29.x", 16 | "jest-environment-jsdom": "29.x", 17 | "ts-jest": "^29.0.0-next.0", 18 | "typescript": "^4.6.4" 19 | }, 20 | "jest": { 21 | "testEnvironment": "jsdom", 22 | "moduleFileExtensions": [ 23 | "js", 24 | "ts", 25 | "json", 26 | "vue" 27 | ], 28 | "moduleNameMapper": { 29 | "^@/(.*)$": "/src/$1" 30 | }, 31 | "transform": { 32 | "^.+\\.ts$": "ts-jest", 33 | "^.+\\.vue$": "@vue/vue3-jest" 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /e2e/3.x/typescript/src/components/Basic.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 19 | 24 | 25 | 48 | -------------------------------------------------------------------------------- /e2e/3.x/typescript/src/components/ScriptSetup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /e2e/3.x/typescript/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import type { DefineComponent } from 'vue'; 3 | const component: DefineComponent<{}, {}, any>; 4 | export default component; 5 | } 6 | -------------------------------------------------------------------------------- /e2e/3.x/typescript/src/test.ts: -------------------------------------------------------------------------------- 1 | import { createApp, h } from 'vue' 2 | 3 | import Basic from '@/components/Basic.vue' 4 | import ScriptSetup from '@/components/ScriptSetup.vue' 5 | 6 | function mount(Component: any) { 7 | document.getElementsByTagName('html')[0].innerHTML = '' 8 | const el = document.createElement('div') 9 | el.id = 'app' 10 | document.body.appendChild(el) 11 | const Parent = { 12 | render() { 13 | return h(Component) 14 | } 15 | } 16 | createApp(Parent).mount(el) 17 | } 18 | 19 | test('processes .vue files', () => { 20 | mount(Basic) 21 | expect(document.querySelector('h1')!.textContent).toBe( 22 | 'Welcome to Your Vue.js App' 23 | ) 24 | }) 25 | 26 | test('supports