feat: support jest v27 in vue3-jest (#343)

cexbrayat · web-flow · commit 47244cddf4f4 · 2021-07-19T17:12:49.000+10:00
* test: add typescript e2e test without babel

Adds a test close to the setup used by the CLI in a TS project without Babel.

The existing TS test was moved to `typescript-with-babel`.
The new test is a copy of the older one, with all babel dependencies removed, a rewritten component using the Composition API, a test in TS, a TS config close to the CLI one, and a shim file.

* feat: support jest v27 in vue3-jest

And also babel-jest and ts-jest v27, for Vue 3.

* feat: use TS config to have commonjs modules

The previous logic was trying to figure out if CommonJS modules were used in the TS config and if not,
and if no babel configuration provided, then loaded a babel transformer to change the module format.

This changes the logic to use a more straightforward method by directly updating the tsconfig to commonjs,
which should hopefully have the same results without side-effects.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -2,7 +2,7 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:10.16.3
+      - image: circleci/node:10.24.1
 
     working_directory: ~/repo
 
diff --git a/e2e/2.x/custom-transformers/package.json b/e2e/2.x/custom-transformers/package.json
@@ -14,6 +14,7 @@
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "@vue/test-utils": "^1.1.0",
+    "babel-jest": "^26.6.3",
     "jest": "26.x",
     "postcss": "^7.0.13",
     "postcss-color-function": "^4.0.1",
diff --git a/e2e/3.x/babel-in-package/package.json b/e2e/3.x/babel-in-package/package.json
@@ -14,12 +14,13 @@
     "@babel/preset-env": "^7.9.0",
     "@vue/compiler-sfc": "^3.0.3",
     "coffeescript": "^2.3.2",
-    "jest": "^26.0.0",
-    "ts-jest": "^26.4.4",
+    "jest": "^27.0.0",
+    "ts-jest": "^27.0.1",
     "typescript": "^4.1.2",
-    "vue3-jest": "^26.0.0-alpha.10"
+    "vue3-jest": "^27.0.0-alpha.1"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "moduleFileExtensions": [
       "js",
       "json",
diff --git a/e2e/3.x/basic/package.json b/e2e/3.x/basic/package.json
@@ -18,15 +18,16 @@
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "coffeescript": "^2.3.2",
     "jade": "^1.11.0",
-    "jest": "^26.0.0",
+    "jest": "^27.0.0",
     "pug": "^2.0.3",
-    "ts-jest": "^26.4.4",
+    "ts-jest": "^27.0.1",
     "typescript": "^4.1.2",
     "vue-class-component": "^8.0.0-beta.4",
-    "vue3-jest": "^26.0.0-alpha.10",
+    "vue3-jest": "^27.0.0-alpha.1",
     "vue-property-decorator": "^10.0.0-rc.3"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "moduleFileExtensions": [
       "js",
       "json",
diff --git a/e2e/3.x/basic/test.js b/e2e/3.x/basic/test.js
@@ -72,21 +72,23 @@ test('handles named exports', () => {
 test('generates source maps for .vue files', () => {
   const filePath = resolve(__dirname, './components/Basic.vue')
   const fileString = readFileSync(filePath, { encoding: 'utf8' })
-
-  const { code } = jestVue.process(fileString, filePath, {
+  const config = {
     moduleFileExtensions: ['js', 'vue']
-  })
+  }
+
+  const { code } = jestVue.process(fileString, filePath, { config })
 
   expect(code).toMatchSnapshot()
 })
 
 test('generates source maps using src attributes', () => {
   const filePath = resolve(__dirname, './components/SourceMapsSrc.vue')
   const fileString = readFileSync(filePath, { encoding: 'utf8' })
-
-  const { code } = jestVue.process(fileString, filePath, {
+  const config = {
     moduleFileExtensions: ['js', 'vue']
-  })
+  }
+
+  const { code } = jestVue.process(fileString, filePath, { config })
 
   expect(code).toMatchSnapshot()
 })
diff --git a/e2e/3.x/custom-transformers/babel-transformer.js b/e2e/3.x/custom-transformers/babel-transformer.js
@@ -1,4 +1,4 @@
-const { createTransformer } = require('babel-jest')
+const { createTransformer } = require('babel-jest').default
 module.exports = createTransformer({
   presets: ['@babel/preset-env']
 })
diff --git a/e2e/3.x/custom-transformers/package.json b/e2e/3.x/custom-transformers/package.json
@@ -13,13 +13,13 @@
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
-    "babel-jest": "^26.0.0",
+    "babel-jest": "^27.0.0",
     "extract-from-css": "^0.4.4",
-    "jest": "^26.0.0",
+    "jest": "^27.0.0",
     "postcss": "^7.0.13",
     "postcss-color-function": "^4.0.1",
     "sass": "^1.23.7",
-    "vue3-jest": "^26.0.0-alpha.10"
+    "vue3-jest": "^27.0.0-alpha.1"
   },
   "jest": {
     "moduleFileExtensions": [
diff --git a/e2e/3.x/javascript/package.json b/e2e/3.x/javascript/package.json
@@ -13,10 +13,11 @@
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "coffeescript": "^2.3.2",
-    "jest": "^26.0.0",
-    "vue3-jest": "^26.0.0-alpha.10"
+    "jest": "^27.0.0",
+    "vue3-jest": "^27.0.0-alpha.1"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "moduleFileExtensions": [
       "js",
       "json",
diff --git a/e2e/3.x/style/package.json b/e2e/3.x/style/package.json
@@ -14,14 +14,15 @@
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "@vue/test-utils": "^1.1.0",
-    "jest": "^26.0.0",
+    "jest": "^27.0.0",
     "less": "^3.9.0",
     "postcss": "^7.0.13",
     "sass": "^1.23.7",
     "stylus": "^0.54.5",
-    "vue3-jest": "^26.0.0-alpha.10"
+    "vue3-jest": "^27.0.0-alpha.1"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "moduleFileExtensions": [
       "js",
       "json",
diff --git a/e2e/3.x/typescript-with-babel/package.json b/e2e/3.x/typescript-with-babel/package.json
@@ -13,10 +13,10 @@
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
-    "jest": "^26.0.0",
-    "ts-jest": "^26.4.4",
+    "jest": "^27.0.0",
+    "ts-jest": "^27.0.1",
     "typescript": "^4.1.2",
-    "vue3-jest": "^26.0.0-alpha.10"
+    "vue3-jest": "^27.0.0-alpha.1"
   },
   "jest": {
     "testEnvironment": "jsdom",
diff --git a/e2e/3.x/typescript/package.json b/e2e/3.x/typescript/package.json
@@ -12,12 +12,13 @@
   },
   "devDependencies": {
     "@types/jest": "16.0.10",
-    "jest": "^26.0.0",
-    "ts-jest": "^26.4.4",
+    "jest": "^27.0.0",
+    "ts-jest": "^27.0.1",
     "typescript": "^4.1.2",
-    "vue3-jest": "^26.0.0-alpha.10"
+    "vue3-jest": "^27.0.0-alpha.1"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "moduleFileExtensions": [
       "js",
       "ts",
diff --git a/packages/vue3-jest/lib/index.js b/packages/vue3-jest/lib/index.js
@@ -1,19 +1,18 @@
 const crypto = require('crypto')
-const babelJest = require('babel-jest')
-
+const babelJest = require('babel-jest').default
 module.exports = {
   process: require('./process'),
   getCacheKey: function getCacheKey(
     fileData,
     filename,
-    configString,
-    { config, instrument, rootDir }
+    { config, configString, instrument, rootDir }
   ) {
     return crypto
       .createHash('md5')
       .update(
-        babelJest.getCacheKey(fileData, filename, configString, {
+        babelJest.getCacheKey(fileData, filename, {
           config,
+          configString,
           instrument,
           rootDir
         }),
diff --git a/packages/vue3-jest/lib/process-style.js b/packages/vue3-jest/lib/process-style.js
@@ -79,7 +79,7 @@ module.exports = function processStyle(stylePart, filePath, config = {}) {
     const preprocessOptions = getPreprocessOptions(
       stylePart.lang,
       filePath,
-      config
+      config.config
     )
     const result = compileStyle({
       id: `vue-jest-${filePath}`,
diff --git a/packages/vue3-jest/lib/process.js b/packages/vue3-jest/lib/process.js
@@ -1,6 +1,6 @@
 const { parse, compileTemplate, compileScript } = require('@vue/compiler-sfc')
 const { transform } = require('@babel/core')
-const babelTransformer = require('babel-jest')
+const babelTransformer = require('babel-jest').default
 
 const typescriptTransformer = require('./transformers/typescript')
 const coffeescriptTransformer = require('./transformers/coffee')
diff --git a/packages/vue3-jest/lib/transformers/coffee.js b/packages/vue3-jest/lib/transformers/coffee.js
@@ -3,7 +3,7 @@ const throwError = require('../utils').throwError
 const getBabelOptions = require('../utils').getBabelOptions
 
 module.exports = {
-  process(src, filename, config) {
+  process(src, filename) {
     ensureRequire('coffee', ['coffeescript'])
     const coffee = require('coffeescript')
     const babelOptions = getBabelOptions(filename)
diff --git a/packages/vue3-jest/lib/transformers/typescript.js b/packages/vue3-jest/lib/transformers/typescript.js
@@ -1,7 +1,6 @@
 const ensureRequire = require('../ensure-require')
-const babelJest = require('babel-jest')
+const babelJest = require('babel-jest').default
 const {
-  getBabelOptions,
   getTsJestConfig,
   stripInlineSourceMap,
   getCustomTransformer,
@@ -14,7 +13,6 @@ module.exports = {
     const typescript = require('typescript')
     const vueJestConfig = getVueJestConfig(config)
     const tsconfig = getTsJestConfig(config)
-    const babelOptions = getBabelOptions(filePath)
 
     const res = typescript.transpileModule(scriptContent, {
       ...tsconfig,
@@ -26,26 +24,11 @@ module.exports = {
     const inputSourceMap =
       res.sourceMapText !== undefined ? JSON.parse(res.sourceMapText) : ''
 
-    // handle ES modules in TS source code in case user uses non commonjs module
-    // output and there is no .babelrc.
-    let inlineBabelOptions = {}
-    if (
-      tsconfig.compilerOptions.module !== typescript.ModuleKind.CommonJS &&
-      !babelOptions
-    ) {
-      inlineBabelOptions = {
-        plugins: [require('@babel/plugin-transform-modules-commonjs')]
-      }
-    }
     const customTransformer =
       getCustomTransformer(vueJestConfig['transform'], 'js') || {}
     const transformer = customTransformer.process
       ? customTransformer
-      : babelJest.createTransformer(
-          Object.assign(inlineBabelOptions, {
-            inputSourceMap
-          })
-        )
+      : babelJest.createTransformer({ inputSourceMap })
 
     return transformer.process(res.outputText, filePath, config)
   }
diff --git a/packages/vue3-jest/lib/utils.js b/packages/vue3-jest/lib/utils.js
@@ -49,7 +49,11 @@ const transformContent = function transformContent(
 
 const getVueJestConfig = function getVueJestConfig(jestConfig) {
   return (
-    (jestConfig && jestConfig.globals && jestConfig.globals['vue-jest']) || {}
+    (jestConfig &&
+      jestConfig.config &&
+      jestConfig.config.globals &&
+      jestConfig.config.globals['vue-jest']) ||
+    {}
   )
 }
 const getBabelOptions = function loadBabelOptions(filename, options = {}) {
@@ -74,12 +78,13 @@ const getTsJestConfig = function getTsJestConfig(config) {
     return null
   }
 
-  const createTransformer = require('ts-jest').createTransformer
-  const tr = createTransformer()
-  const configSet = tr.configsFor(config)
+  const { ConfigSet } = require('ts-jest/dist/config/config-set')
+  const configSet = new ConfigSet(config.config)
   const tsConfig = configSet.typescript || configSet.parsedTsConfig
   // Force es5 to prevent const vue_1 = require('vue') from conflicting
-  return { compilerOptions: { ...tsConfig.options, target: 'es5' } }
+  return {
+    compilerOptions: { ...tsConfig.options, target: 'es5', module: 'commonjs' }
+  }
 }
 
 function isValidTransformer(transformer) {
diff --git a/packages/vue3-jest/package.json b/packages/vue3-jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue3-jest",
-  "version": "26.0.0-alpha.10",
+  "version": "27.0.0-alpha.1",
   "description": "Jest Vue transform",
   "main": "lib/index.js",
   "files": [
@@ -27,19 +27,20 @@
     "@babel/core": "^7.9.0",
     "@vue/compiler-sfc": "^3.0.3",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^26.0.0",
+    "babel-jest": "^27.0.0",
     "conventional-changelog": "^1.1.5",
-    "jest": "^26.0.0",
+    "jest": "^27.0.0",
+    "jest-cli": "^27.0.0",
     "semantic-release": "^15.13.2",
-    "ts-jest": "^26.4.4",
+    "ts-jest": "^27.0.1",
     "typescript": "^4.1.2",
     "vue": "^3.0.3"
   },
   "peerDependencies": {
     "@babel/core": "7.x",
-    "babel-jest": "26.x",
-    "jest": "26.x",
-    "ts-jest": "26.x",
+    "babel-jest": "27.x",
+    "jest": "27.x",
+    "ts-jest": "27.x",
     "typescript": ">= 3.x",
     "vue": "^3.0.0-0"
   },
diff --git a/yarn.lock b/yarn.lock
