diff --git a/README.md b/README.md index f0e92bad..38e53f22 100644 --- a/README.md +++ b/README.md @@ -118,7 +118,7 @@ A `package.json` Example "^.+\\.vue$": "@vue/vue2-jest" }, "globals": { - "@vue/vue2-jest": { + "vue-jest": { "transform": { "your-custom-block": "./custom-block-processor.js" } @@ -135,7 +135,7 @@ A `jest.config.js` Example - If you're using a dedicated configuration file like ```js module.exports = { globals: { - '@vue/vue2-jest': { + 'vue-jest': { transform: { 'your-custom-block': require('./custom-block-processor') } @@ -170,7 +170,7 @@ You can provide [TemplateCompileOptions](https://github.com/vuejs/component-comp { "jest": { "globals": { - "@vue/vue2-jest": { + "vue-jest": { "templateCompiler": { "transpileOptions": { "transforms": { @@ -195,7 +195,7 @@ You can provide [TemplateCompileOptions](https://github.com/vuejs/component-comp { "jest": { "globals": { - "@vue/vue2-jest": { + "vue-jest": { "pug": { "basedir": "mybasedir" } diff --git a/e2e/2.x/babel-in-package/package.json b/e2e/2.x/babel-in-package/package.json index 55dcde43..b9ebc577 100644 --- a/e2e/2.x/babel-in-package/package.json +++ b/e2e/2.x/babel-in-package/package.json @@ -8,8 +8,8 @@ }, "dependencies": { "source-map": "0.5.6", - "vue": "^2.5.21", - "vue-template-compiler": "^2.5.21" + "vue": "^2.7.7", + "vue-template-compiler": "^2.7.7" }, "devDependencies": { "@babel/core": "^7.9.0", diff --git a/e2e/2.x/basic/__snapshots__/test.js.snap b/e2e/2.x/basic/__snapshots__/test.js.snap index f7f217d9..f8f9c647 100644 --- a/e2e/2.x/basic/__snapshots__/test.js.snap +++ b/e2e/2.x/basic/__snapshots__/test.js.snap @@ -3,47 +3,35 @@ exports[`generates source maps for .vue files 1`] = ` { "file": "./components/Basic.vue", - "mappings": ";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;eAEe;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", - "names": [ - "name", - "computed", - "headingClasses", - "red", - "isCrazy", - "blue", - "shadow", - "data", - "msg", - "methods", - "toggleClass", - ], + "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", + "names": [], "sources": [ - "Basic.vue", + "components/Basic.vue", ], "sourcesContent": [ - "// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// + " + + + + + ", ], "version": 3, diff --git a/e2e/2.x/basic/components/ExtendedTsConfig.vue b/e2e/2.x/basic/components/ExtendedTsConfig.vue new file mode 100644 index 00000000..8dc7001f --- /dev/null +++ b/e2e/2.x/basic/components/ExtendedTsConfig.vue @@ -0,0 +1,34 @@ + + + diff --git a/e2e/2.x/basic/components/ModuleRequiringEsModuleInterop.js b/e2e/2.x/basic/components/ModuleRequiringEsModuleInterop.js new file mode 100644 index 00000000..fed7caa7 --- /dev/null +++ b/e2e/2.x/basic/components/ModuleRequiringEsModuleInterop.js @@ -0,0 +1 @@ +module.exports = () => false diff --git a/e2e/2.x/basic/components/ScriptAndScriptSetup.vue b/e2e/2.x/basic/components/ScriptAndScriptSetup.vue new file mode 100644 index 00000000..e3aa2fcb --- /dev/null +++ b/e2e/2.x/basic/components/ScriptAndScriptSetup.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/e2e/2.x/basic/components/ScriptSetup.vue b/e2e/2.x/basic/components/ScriptSetup.vue new file mode 100644 index 00000000..6c413862 --- /dev/null +++ b/e2e/2.x/basic/components/ScriptSetup.vue @@ -0,0 +1,20 @@ + + + diff --git a/e2e/2.x/basic/package.json b/e2e/2.x/basic/package.json index a657c3ec..152b804c 100644 --- a/e2e/2.x/basic/package.json +++ b/e2e/2.x/basic/package.json @@ -7,8 +7,8 @@ "test": "jest --no-cache --coverage test.js" }, "dependencies": { - "vue": "^2.5.21", - "vue-template-compiler": "^2.5.21" + "vue": "^2.7.7", + "vue-template-compiler": "^2.7.7" }, "devDependencies": { "@babel/core": "^7.9.0", diff --git a/e2e/2.x/basic/test.js b/e2e/2.x/basic/test.js index c81e3292..9eb6b525 100644 --- a/e2e/2.x/basic/test.js +++ b/e2e/2.x/basic/test.js @@ -20,6 +20,10 @@ import PugRelative from './components/PugRelativeExtends.vue' import Jsx from './components/Jsx.vue' import Constructor from './components/Constructor.vue' import { compileStyle } from '@vue/component-compiler-utils' +import ScriptSetup from './components/ScriptSetup' +import ScriptAndScriptSetup from './components/ScriptAndScriptSetup' +import ExtendedTsConfig from './components/ExtendedTsConfig.vue' + jest.mock('@vue/component-compiler-utils', () => ({ ...jest.requireActual('@vue/component-compiler-utils'), compileStyle: jest.fn(() => ({ errors: [], code: '' })) @@ -156,6 +160,23 @@ test('processes SFC with no template', () => { expect(wrapper.element.tagName).toBe('SECTION') }) +test('processes SFC with + + +{ + "en": { + "hello": "Hello!" + }, + "ja": { + "hello": "こんにちは!" + } +} + diff --git a/e2e/2.x/custom-block/components/Multiple.vue b/e2e/2.x/custom-block/components/Multiple.vue new file mode 100644 index 00000000..f204d041 --- /dev/null +++ b/e2e/2.x/custom-block/components/Multiple.vue @@ -0,0 +1,26 @@ + + + + + +{ + "en": { + "hello": "Hello!" + }, + "ja": { + "hello": "こんにちは!" + } +} + + + +{ + "foo": "foo" +} + diff --git a/e2e/2.x/custom-block/package.json b/e2e/2.x/custom-block/package.json new file mode 100644 index 00000000..0b0442f6 --- /dev/null +++ b/e2e/2.x/custom-block/package.json @@ -0,0 +1,41 @@ +{ + "name": "vue2-custom-block", + "version": "1.0.0", + "license": "MIT", + "private": true, + "scripts": { + "test": "jest --no-cache --coverage test.js" + }, + "dependencies": { + "vue": "^2.7.7", + "vue-template-compiler": "^2.7.7" + }, + "devDependencies": { + "@babel/core": "^7.9.0", + "@babel/preset-env": "^7.9.0", + "@vue/vue2-jest": "^29.0.0", + "jest": "29.x", + "jest-environment-jsdom": "29.x" + }, + "jest": { + "moduleFileExtensions": [ + "js", + "json", + "vue" + ], + "transform": { + "^.+\\.js$": "babel-jest", + "^.+\\.vue$": "@vue/vue2-jest" + }, + "moduleNameMapper": { + "^~?__styles/(.*)$": "/components/styles/$1" + }, + "globals": { + "vue-jest": { + "transform": { + "custom": "./transformer.js" + } + } + } + } +} diff --git a/e2e/2.x/custom-block/test.js b/e2e/2.x/custom-block/test.js new file mode 100644 index 00000000..79556a9c --- /dev/null +++ b/e2e/2.x/custom-block/test.js @@ -0,0 +1,33 @@ +import Basic from './components/Basic.vue' +import Multiple from './components/Multiple.vue' + +test('Basic', () => { + expect(Basic.__custom).toMatchObject([ + { + en: { + hello: 'Hello!' + }, + ja: { + hello: 'こんにちは!' + } + } + ]) + expect(Basic.__custom).toMatchSnapshot() +}) + +test('Multiple blocks', () => { + expect(Multiple.__custom).toMatchObject([ + { + en: { + hello: 'Hello!' + }, + ja: { + hello: 'こんにちは!' + } + }, + { + foo: 'foo' + } + ]) + expect(Multiple.__custom).toMatchSnapshot() +}) diff --git a/e2e/2.x/custom-block/transformer.js b/e2e/2.x/custom-block/transformer.js new file mode 100644 index 00000000..b0266930 --- /dev/null +++ b/e2e/2.x/custom-block/transformer.js @@ -0,0 +1,21 @@ +function convert(content) { + return JSON.stringify(JSON.parse(content)) + .replace(/\u2028/g, '\\u2028') // LINE SEPARATOR + .replace(/\u2029/g, '\\u2029') // PARAGRAPH SEPARATOR + .replace(/\\/g, '\\\\') + .replace(/'/g, "\\'") +} + +module.exports = { + process({ blocks, vueOptionsNamespace, filename, config }) { + const ret = blocks.reduce((codes, block) => { + codes.push( + `${vueOptionsNamespace}.__custom = ${vueOptionsNamespace}.__custom || [];${vueOptionsNamespace}.__custom.push(${convert( + block.content + )});` + ) + return codes + }, []) + return ret.join('') + } +} diff --git a/e2e/2.x/custom-transformers/components/Scss.vue b/e2e/2.x/custom-transformers/components/Scss.vue index 6b88eb24..474edea9 100644 --- a/e2e/2.x/custom-transformers/components/Scss.vue +++ b/e2e/2.x/custom-transformers/components/Scss.vue @@ -1,7 +1,7 @@ diff --git a/e2e/2.x/custom-transformers/package.json b/e2e/2.x/custom-transformers/package.json index 3edbe98c..7d5609c9 100644 --- a/e2e/2.x/custom-transformers/package.json +++ b/e2e/2.x/custom-transformers/package.json @@ -7,8 +7,8 @@ "test": "jest --no-cache --coverage test.js" }, "dependencies": { - "vue": "^2.5.21", - "vue-template-compiler": "^2.5.21" + "vue": "^2.7.7", + "vue-template-compiler": "^2.7.7" }, "devDependencies": { "@babel/core": "^7.9.0", diff --git a/e2e/2.x/sass-importer/entry/package.json b/e2e/2.x/sass-importer/entry/package.json index b7bd0c52..5637c767 100644 --- a/e2e/2.x/sass-importer/entry/package.json +++ b/e2e/2.x/sass-importer/entry/package.json @@ -7,8 +7,8 @@ "test": "jest --no-cache --coverage test.js" }, "dependencies": { - "vue": "^2.5.21", - "vue-template-compiler": "^2.5.21", + "vue": "^2.7.7", + "vue-template-compiler": "^2.7.7", "vue2-sass-importer-lib": "file:../lib", "vue2-sass-importer-sass-lib": "file:../sass-lib-v2" }, diff --git a/e2e/2.x/sass-importer/lib/package.json b/e2e/2.x/sass-importer/lib/package.json index 330adfab..6d9b3678 100644 --- a/e2e/2.x/sass-importer/lib/package.json +++ b/e2e/2.x/sass-importer/lib/package.json @@ -14,6 +14,6 @@ "vue2-sass-importer-sass-lib": "file:../sass-lib-v1" }, "peerDependencies": { - "vue": "^2.5.21" + "vue": "^2.7.7" } } diff --git a/e2e/2.x/style/colors.less b/e2e/2.x/style/colors.less new file mode 100644 index 00000000..7b9ea3f9 --- /dev/null +++ b/e2e/2.x/style/colors.less @@ -0,0 +1 @@ +@primary-color: "red"; diff --git a/e2e/2.x/style/colors.scss b/e2e/2.x/style/colors.scss new file mode 100644 index 00000000..d7cf8edb --- /dev/null +++ b/e2e/2.x/style/colors.scss @@ -0,0 +1 @@ +$primary-color: #333; diff --git a/e2e/2.x/style/package.json b/e2e/2.x/style/package.json index 9550805a..26fa1828 100644 --- a/e2e/2.x/style/package.json +++ b/e2e/2.x/style/package.json @@ -7,8 +7,8 @@ "test": "node setup.js && jest --no-cache test.js" }, "dependencies": { - "vue": "^2.5.21", - "vue-template-compiler": "^2.5.21" + "vue": "^2.7.7", + "vue-template-compiler": "^2.7.7" }, "devDependencies": { "@babel/core": "^7.9.0", diff --git a/e2e/2.x/style/variables.less b/e2e/2.x/style/variables.less index 7b9ea3f9..57319a4a 100644 --- a/e2e/2.x/style/variables.less +++ b/e2e/2.x/style/variables.less @@ -1 +1,3 @@ -@primary-color: "red"; +@import "./colors.less"; + +@font-size: 16px; diff --git a/e2e/2.x/style/variables.scss b/e2e/2.x/style/variables.scss index d7cf8edb..4f8d9064 100644 --- a/e2e/2.x/style/variables.scss +++ b/e2e/2.x/style/variables.scss @@ -1 +1,3 @@ -$primary-color: #333; +@import './colors.scss'; + +$font-size: 16px; diff --git a/e2e/3.x/babel-in-package/components/Tsx.vue b/e2e/3.x/babel-in-package/components/Tsx.vue new file mode 100644 index 00000000..7a1062c3 --- /dev/null +++ b/e2e/3.x/babel-in-package/components/Tsx.vue @@ -0,0 +1,7 @@ + diff --git a/e2e/3.x/babel-in-package/package.json b/e2e/3.x/babel-in-package/package.json index 3e0881ed..5c2ffe0f 100644 --- a/e2e/3.x/babel-in-package/package.json +++ b/e2e/3.x/babel-in-package/package.json @@ -12,6 +12,7 @@ "devDependencies": { "@babel/core": "^7.9.0", "@babel/preset-env": "^7.9.0", + "@vue/babel-plugin-jsx": "^1.1.5", "@vue/vue3-jest": "^29.0.0", "coffeescript": "^2.3.2", "jest": "29.x", @@ -34,6 +35,9 @@ "babel": { "presets": [ "@babel/env" + ], + "plugins": [ + "@vue/babel-plugin-jsx" ] } } diff --git a/e2e/3.x/babel-in-package/test.js b/e2e/3.x/babel-in-package/test.js index 8bc52e74..e5b7d33d 100644 --- a/e2e/3.x/babel-in-package/test.js +++ b/e2e/3.x/babel-in-package/test.js @@ -3,6 +3,7 @@ import { createApp, h } from 'vue' import TypeScript from './components/TypeScript.vue' import Basic from './components/Basic.vue' import Coffee from './components/Coffee.vue' +import Tsx from './components/Tsx.vue' function mount(Component, props, slots) { document.getElementsByTagName('html')[0].innerHTML = '' @@ -34,3 +35,8 @@ test('processes .vue files with lang set to typescript', () => { expect(document.querySelector('#parent').textContent).toBe('Parent') expect(document.querySelector('#child').textContent).toBe('Child') }) + +test('processes .vue files with lang set to tsx(typescript)', () => { + mount(Tsx) + expect(document.querySelector('div').textContent).toContain('tsx components') +}) diff --git a/e2e/3.x/basic/components/ExtendedTsConfig.vue b/e2e/3.x/basic/components/ExtendedTsConfig.vue new file mode 100644 index 00000000..8dc7001f --- /dev/null +++ b/e2e/3.x/basic/components/ExtendedTsConfig.vue @@ -0,0 +1,34 @@ + + + diff --git a/e2e/3.x/basic/components/ModuleRequiringEsModuleInterop.js b/e2e/3.x/basic/components/ModuleRequiringEsModuleInterop.js new file mode 100644 index 00000000..fed7caa7 --- /dev/null +++ b/e2e/3.x/basic/components/ModuleRequiringEsModuleInterop.js @@ -0,0 +1 @@ +module.exports = () => false diff --git a/e2e/3.x/basic/components/ScriptAndScriptSetup.vue b/e2e/3.x/basic/components/ScriptAndScriptSetup.vue new file mode 100644 index 00000000..e3aa2fcb --- /dev/null +++ b/e2e/3.x/basic/components/ScriptAndScriptSetup.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/e2e/3.x/basic/test.js b/e2e/3.x/basic/test.js index 553ec119..504c44c7 100644 --- a/e2e/3.x/basic/test.js +++ b/e2e/3.x/basic/test.js @@ -23,6 +23,8 @@ import ScriptSetup from './components/ScriptSetup.vue' import ScriptSetupSugarRef from './components/ScriptSetupSugarRef.vue' import FunctionalRenderFn from './components/FunctionalRenderFn.vue' import CompilerDirective from './components/CompilerDirective.vue' +import ExtendedTsConfig from './components/ExtendedTsConfig.vue' +import ScriptAndScriptSetup from './components/ScriptAndScriptSetup.vue' // TODO: JSX for Vue 3? TSX? import Jsx from './components/Jsx.vue' @@ -207,3 +209,15 @@ test('ensure compilerOptions is passed down', () => { const elm = document.querySelector('h1') expect(elm.hasAttribute('data-test')).toBe(false) }) + +test('handles extended tsconfig.json files', () => { + mount(ExtendedTsConfig) + const elm = document.querySelector('div') + expect(elm).toBeDefined() +}) + +test('processes SFC with both