From f41eec629b6c1796defcea9da23cfe8304a1146b Mon Sep 17 00:00:00 2001 From: Yama-Tomo Date: Fri, 1 Oct 2021 17:03:08 +0900 Subject: [PATCH 1/3] test: add tsx file --- e2e/2.x/babel-in-package/components/Tsx.vue | 14 +++ e2e/2.x/babel-in-package/package.json | 8 +- e2e/2.x/babel-in-package/test.js | 8 +- e2e/2.x/babel-in-package/tsconfig.json | 3 +- yarn.lock | 117 ++++++++++++++++++++ 5 files changed, 145 insertions(+), 5 deletions(-) create mode 100644 e2e/2.x/babel-in-package/components/Tsx.vue diff --git a/e2e/2.x/babel-in-package/components/Tsx.vue b/e2e/2.x/babel-in-package/components/Tsx.vue new file mode 100644 index 00000000..6b1040d3 --- /dev/null +++ b/e2e/2.x/babel-in-package/components/Tsx.vue @@ -0,0 +1,14 @@ + diff --git a/e2e/2.x/babel-in-package/package.json b/e2e/2.x/babel-in-package/package.json index e351d6b8..1a8e536f 100644 --- a/e2e/2.x/babel-in-package/package.json +++ b/e2e/2.x/babel-in-package/package.json @@ -14,12 +14,13 @@ "devDependencies": { "@babel/core": "^7.9.0", "@babel/preset-env": "^7.9.0", + "@vue/babel-preset-jsx": "^1.2.4", "@vue/test-utils": "^1.1.0", + "@vue/vue2-jest": "~27.0.0-alpha.1", "coffeescript": "^2.3.2", "jest": "27.x", "ts-jest": "^27.0.4", - "typescript": "^3.2.2", - "@vue/vue2-jest": "~27.0.0-alpha.1" + "typescript": "^3.2.2" }, "jest": { "testEnvironment": "jsdom", @@ -35,7 +36,8 @@ }, "babel": { "presets": [ - "@babel/env" + "@babel/env", + "@vue/babel-preset-jsx" ] } } diff --git a/e2e/2.x/babel-in-package/test.js b/e2e/2.x/babel-in-package/test.js index 70be30d8..06709f6d 100644 --- a/e2e/2.x/babel-in-package/test.js +++ b/e2e/2.x/babel-in-package/test.js @@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils' import TypeScript from './components/TypeScript.vue' import Basic from './components/Basic.vue' import Coffee from './components/Coffee.vue' +import Tsx from './components/Tsx.vue' test('processes .vue files', () => { const wrapper = mount(Basic) @@ -13,7 +14,12 @@ test('processes .vue file with lang set to coffee', () => { expect(wrapper.vm).toBeTruthy() }) -test('processes .vue files with lang set to typescript', () => { +test('processes .vue files with lang set to ts(typescript)', () => { const wrapper = mount(TypeScript) expect(wrapper.vm).toBeTruthy() }) + +test('processes .vue files with lang set to tsx(typescript)', () => { + const wrapper = mount(Tsx) + expect(wrapper.text()).toContain('tsx components') +}) diff --git a/e2e/2.x/babel-in-package/tsconfig.json b/e2e/2.x/babel-in-package/tsconfig.json index d3fd602d..98e192f0 100644 --- a/e2e/2.x/babel-in-package/tsconfig.json +++ b/e2e/2.x/babel-in-package/tsconfig.json @@ -14,6 +14,7 @@ "emitDecoratorMetadata": true, "suppressImplicitAnyIndexErrors": true, "allowSyntheticDefaultImports": true, - "sourceMap": true + "sourceMap": true, + "esModuleInterop": true } } diff --git a/yarn.lock b/yarn.lock index d2ec2a0c..df314b46 100644 --- a/yarn.lock +++ b/yarn.lock @@ -140,6 +140,13 @@ dependencies: "@babel/types" "^7.15.0" +"@babel/helper-module-imports@^7.0.0": + version "7.15.4" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.15.4.tgz#e18007d230632dea19b47853b984476e7b4e103f" + integrity sha512-jeAHZbzUwdW/xHgHQ3QmWR4Jg6j15q4w/gCfwZvtqOxoo5DKtLHk8Bsf4c5RZRC7NmLEs+ohkdq8jFefuvIxAA== + dependencies: + "@babel/types" "^7.15.4" + "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.14.5": version "7.14.5" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz#6d1a44df6a38c957aa7c312da076429f11b422f3" @@ -454,6 +461,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.8.0" +"@babel/plugin-syntax-jsx@^7.2.0": + version "7.14.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201" + integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw== + dependencies: + "@babel/helper-plugin-utils" "^7.14.5" + "@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699" @@ -894,6 +908,14 @@ "@babel/helper-validator-identifier" "^7.14.9" to-fast-properties "^2.0.0" +"@babel/types@^7.15.4": + version "7.15.6" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.6.tgz#99abdc48218b2881c058dd0a7ab05b99c9be758f" + integrity sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig== + dependencies: + "@babel/helper-validator-identifier" "^7.14.9" + to-fast-properties "^2.0.0" + "@babel/types@^7.6.1", "@babel/types@^7.9.6": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.4.tgz#74eeb86dbd6748d2741396557b9860e57fce0a0d" @@ -1644,6 +1666,86 @@ dependencies: "@types/yargs-parser" "*" +"@vue/babel-helper-vue-jsx-merge-props@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81" + integrity sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA== + +"@vue/babel-plugin-transform-vue-jsx@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.2.1.tgz#646046c652c2f0242727f34519d917b064041ed7" + integrity sha512-HJuqwACYehQwh1fNT8f4kyzqlNMpBuUK4rSiSES5D4QsYncv5fxFsLyrxFPG2ksO7t5WP+Vgix6tt6yKClwPzA== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/plugin-syntax-jsx" "^7.2.0" + "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1" + html-tags "^2.0.0" + lodash.kebabcase "^4.1.1" + svg-tags "^1.0.0" + +"@vue/babel-preset-jsx@^1.2.4": + version "1.2.4" + resolved "https://registry.yarnpkg.com/@vue/babel-preset-jsx/-/babel-preset-jsx-1.2.4.tgz#92fea79db6f13b01e80d3a0099e2924bdcbe4e87" + integrity sha512-oRVnmN2a77bYDJzeGSt92AuHXbkIxbf/XXSE3klINnh9AXBmVS1DGa1f0d+dDYpLfsAKElMnqKTQfKn7obcL4w== + dependencies: + "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1" + "@vue/babel-plugin-transform-vue-jsx" "^1.2.1" + "@vue/babel-sugar-composition-api-inject-h" "^1.2.1" + "@vue/babel-sugar-composition-api-render-instance" "^1.2.4" + "@vue/babel-sugar-functional-vue" "^1.2.2" + "@vue/babel-sugar-inject-h" "^1.2.2" + "@vue/babel-sugar-v-model" "^1.2.3" + "@vue/babel-sugar-v-on" "^1.2.3" + +"@vue/babel-sugar-composition-api-inject-h@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@vue/babel-sugar-composition-api-inject-h/-/babel-sugar-composition-api-inject-h-1.2.1.tgz#05d6e0c432710e37582b2be9a6049b689b6f03eb" + integrity sha512-4B3L5Z2G+7s+9Bwbf+zPIifkFNcKth7fQwekVbnOA3cr3Pq71q71goWr97sk4/yyzH8phfe5ODVzEjX7HU7ItQ== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + +"@vue/babel-sugar-composition-api-render-instance@^1.2.4": + version "1.2.4" + resolved "https://registry.yarnpkg.com/@vue/babel-sugar-composition-api-render-instance/-/babel-sugar-composition-api-render-instance-1.2.4.tgz#e4cbc6997c344fac271785ad7a29325c51d68d19" + integrity sha512-joha4PZznQMsxQYXtR3MnTgCASC9u3zt9KfBxIeuI5g2gscpTsSKRDzWQt4aqNIpx6cv8On7/m6zmmovlNsG7Q== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + +"@vue/babel-sugar-functional-vue@^1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@vue/babel-sugar-functional-vue/-/babel-sugar-functional-vue-1.2.2.tgz#267a9ac8d787c96edbf03ce3f392c49da9bd2658" + integrity sha512-JvbgGn1bjCLByIAU1VOoepHQ1vFsroSA/QkzdiSs657V79q6OwEWLCQtQnEXD/rLTA8rRit4rMOhFpbjRFm82w== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + +"@vue/babel-sugar-inject-h@^1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@vue/babel-sugar-inject-h/-/babel-sugar-inject-h-1.2.2.tgz#d738d3c893367ec8491dcbb669b000919293e3aa" + integrity sha512-y8vTo00oRkzQTgufeotjCLPAvlhnpSkcHFEp60+LJUwygGcd5Chrpn5480AQp/thrxVm8m2ifAk0LyFel9oCnw== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + +"@vue/babel-sugar-v-model@^1.2.3": + version "1.2.3" + resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-model/-/babel-sugar-v-model-1.2.3.tgz#fa1f29ba51ebf0aa1a6c35fa66d539bc459a18f2" + integrity sha512-A2jxx87mySr/ulAsSSyYE8un6SIH0NWHiLaCWpodPCVOlQVODCaSpiR4+IMsmBr73haG+oeCuSvMOM+ttWUqRQ== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1" + "@vue/babel-plugin-transform-vue-jsx" "^1.2.1" + camelcase "^5.0.0" + html-tags "^2.0.0" + svg-tags "^1.0.0" + +"@vue/babel-sugar-v-on@^1.2.3": + version "1.2.3" + resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-on/-/babel-sugar-v-on-1.2.3.tgz#342367178586a69f392f04bfba32021d02913ada" + integrity sha512-kt12VJdz/37D3N3eglBywV8GStKNUhNrsxChXIV+o0MwVXORYuhDTHJRKPgLJRb/EY3vM2aRFQdxJBp9CLikjw== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + "@vue/babel-plugin-transform-vue-jsx" "^1.2.1" + camelcase "^5.0.0" + "@vue/compiler-core@3.2.6": version "3.2.6" resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.6.tgz#7162bb0670273f04566af0d353009187ab577915" @@ -5022,6 +5124,11 @@ html-escaper@^2.0.0: resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453" integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg== +html-tags@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b" + integrity sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos= + http-cache-semantics@^3.8.1: version "3.8.1" resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz#39b0e16add9b605bf0a9ef3d9daaf4843b4cacd2" @@ -7203,6 +7310,11 @@ lodash.isstring@^4.0.1: resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451" integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE= +lodash.kebabcase@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36" + integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY= + lodash.set@^4.3.2: version "4.3.2" resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23" @@ -10399,6 +10511,11 @@ supports-hyperlinks@^2.0.0: has-flag "^4.0.0" supports-color "^7.0.0" +svg-tags@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764" + integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q= + symbol-observable@^1.1.0: version "1.2.0" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" From 10f2ee0d884c524ad53857dfa24114d7abf4e0f8 Mon Sep 17 00:00:00 2001 From: Yama-Tomo Date: Fri, 1 Oct 2021 17:04:12 +0900 Subject: [PATCH 2/3] fix: transpile as tsx when lang='tsx' --- packages/vue2-jest/lib/process.js | 2 +- packages/vue2-jest/lib/transformers/typescript.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vue2-jest/lib/process.js b/packages/vue2-jest/lib/process.js index 6385ae84..83e7a720 100644 --- a/packages/vue2-jest/lib/process.js +++ b/packages/vue2-jest/lib/process.js @@ -17,7 +17,7 @@ const generateCode = require('./generate-code') function resolveTransformer(lang = 'js', vueJestConfig) { const transformer = getCustomTransformer(vueJestConfig['transform'], lang) if (/^typescript$|tsx?$/.test(lang)) { - return transformer || require('./transformers/typescript') + return transformer || require('./transformers/typescript')(lang) } else if (/^coffee$|coffeescript$/.test(lang)) { return transformer || coffeescriptTransformer } else { diff --git a/packages/vue2-jest/lib/transformers/typescript.js b/packages/vue2-jest/lib/transformers/typescript.js index 1aa2b656..f32fa454 100644 --- a/packages/vue2-jest/lib/transformers/typescript.js +++ b/packages/vue2-jest/lib/transformers/typescript.js @@ -7,7 +7,7 @@ const { getVueJestConfig } = require('../utils') -module.exports = { +module.exports = scriptLang => ({ process(scriptContent, filePath, config) { ensureRequire('typescript', ['typescript']) const typescript = require('typescript') @@ -16,7 +16,7 @@ module.exports = { const res = typescript.transpileModule(scriptContent, { ...tsconfig, - fileName: filePath + fileName: filePath + (scriptLang === 'tsx' ? '.tsx' : '') }) res.outputText = stripInlineSourceMap(res.outputText) @@ -32,4 +32,4 @@ module.exports = { return transformer.process(res.outputText, filePath, config) } -} +}) From 740e958fca6a63898c6d360afd3bb3343b79e2a3 Mon Sep 17 00:00:00 2001 From: Yama-Tomo Date: Fri, 1 Oct 2021 17:06:42 +0900 Subject: [PATCH 3/3] feat: remove hardcoded `target` --- packages/vue2-jest/lib/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vue2-jest/lib/utils.js b/packages/vue2-jest/lib/utils.js index 9930067a..34dce3e7 100644 --- a/packages/vue2-jest/lib/utils.js +++ b/packages/vue2-jest/lib/utils.js @@ -72,7 +72,7 @@ const getTsJestConfig = function getTsJestConfig(config) { const configSet = new ConfigSet(config.config) var tsConfig = configSet.typescript || configSet.parsedTsConfig return { - compilerOptions: { ...tsConfig.options, target: 'es5', module: 'commonjs' } + compilerOptions: { ...tsConfig.options, module: 'commonjs' } } }