feat!: update jest to v27 (#6627)

Author: cexbrayat

docs/migrations/migrate-from-v4.md

@@ -139,11 +139,11 @@ Please consider switching to ESLint. You can check out [`tslint-to-eslint-config
 
 ### Unit-Jest Plugin
 
-* For Vue 2 projects, `vue-jest` is now required as a peer dependency, please install `vue-jest@^4.0.1` as a dev dependency to the project.
-* For TypeScript projects, `ts-jest` is now required as a peer dependency. Users need to install `ts-jest@26` manually to the project root.
-* The underlying `jest`-related packages are upgraded from v24 to v26. For most users the transition would be seamless. See their corresponding changelogs for more detail:
-  * [jest, babel-jest](https://github.com/facebook/jest/blob/v26.6.3/CHANGELOG.md)
-  * [ts-jest](https://github.com/kulshekhar/ts-jest/blob/v26.4.4/CHANGELOG.md)
+* For Vue 2 projects, `@vue/vue2-jest` is now required as a peer dependency, please install `@vue/vue2-jest` as a dev dependency to the project.
+* For TypeScript projects, `ts-jest` is now required as a peer dependency. Users need to install `ts-jest@27` manually to the project root.
+* The underlying `jest`-related packages are upgraded from v24 to v27. For most users the transition would be seamless. See their corresponding changelogs for more detail:
+  * [jest, babel-jest](https://github.com/facebook/jest/blob/v27.1.0/CHANGELOG.md)
+  * [ts-jest](https://github.com/kulshekhar/ts-jest/blob/v27.0.0/CHANGELOG.md)
 
 ### Unit-Mocha Plugin
 

package.json

@@ -41,7 +41,7 @@
     "@vuepress/plugin-pwa": "^1.8.1",
     "@vuepress/theme-vue": "^1.8.1",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.0.6",
     "chromedriver": "^92.0.0",
     "debug": "^4.1.0",
     "eslint": "^7.32.0",
@@ -57,7 +57,7 @@
     "graphql": "^15.5.0",
     "http-server": "^0.12.3",
     "inquirer": "^8.0.0",
-    "jest": "^26.6.3",
+    "jest": "^27.0.6",
     "lerna": "^4.0.0",
     "lerna-changelog": "^2.1.0",
     "lint-staged": "^11.1.2",
@@ -75,6 +75,7 @@
     "yorkie": "^2.0.0"
   },
   "resolutions": {
+    "postcss": "8.3.6",
     "puppeteer": "1.11.0",
     "vue-template-compiler": "^2.6.14",
     "vue-server-renderer": "^2.6.14"

packages/@vue/cli-plugin-typescript/package.json

@@ -51,7 +51,7 @@
   },
   "devDependencies": {
     "@types/chai": "^4.2.15",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^27.0.1",
     "@types/mocha": "^8.2.1",
     "jscodeshift": "^0.13.0",
     "typescript": "~4.1.5",

packages/@vue/cli-plugin-unit-jest/__tests__/jestPlugin.spec.js

@@ -1,7 +1,6 @@
 jest.setTimeout(300000)
 
 const create = require('@vue/cli-test-utils/createTestProject')
-const createOutside = require('@vue/cli-test-utils/createUpgradableProject')
 
 test('should work', async () => {
   const project = await create('unit-jest', {
@@ -126,16 +125,3 @@ test('should correctly configured eslint', async () => {
   })
   await project.run(`vue-cli-service lint`)
 })
-
-test('should work with Vue 3', async () => {
-  const project = await createOutside('unit-jest-vue-3', {
-    vueVersion: '3',
-    plugins: {
-      '@vue/cli-plugin-babel': {},
-      '@vue/cli-plugin-unit-jest': {}
-    }
-  })
-  const pkg = JSON.parse(await project.read('package.json'))
-  expect(pkg.devDependencies['@vue/test-utils']).toMatch('^2')
-  await project.run(`vue-cli-service test:unit`)
-})

packages/@vue/cli-plugin-unit-jest/__tests__/jestPluginVue3.spec.js

@@ -12,5 +12,24 @@ test('should work with Vue 3', async () => {
   })
   const pkg = JSON.parse(await project.read('package.json'))
   expect(pkg.devDependencies['@vue/test-utils']).toMatch('^2')
+  expect(pkg.devDependencies['@vue/vue3-jest']).toMatch('^27')
+  expect(pkg.devDependencies.jest).toMatch('^27')
+  expect(pkg.devDependencies['babel-jest']).toMatch('^27')
+  await project.run(`vue-cli-service test:unit`)
+})
+
+test('should work with Vue 3 and TS', async () => {
+  const project = await createOutside('unit-jest-vue-3', {
+    vueVersion: '3',
+    plugins: {
+      '@vue/cli-plugin-typescript': {},
+      '@vue/cli-plugin-unit-jest': {}
+    }
+  })
+  const pkg = JSON.parse(await project.read('package.json'))
+  expect(pkg.devDependencies['@vue/test-utils']).toMatch('^2')
+  expect(pkg.devDependencies['@vue/vue3-jest']).toMatch('^27')
+  expect(pkg.devDependencies.jest).toMatch('^27')
+  expect(pkg.devDependencies['ts-jest']).toMatch('^27')
   await project.run(`vue-cli-service test:unit`)
 })

packages/@vue/cli-plugin-unit-jest/generator/index.js

@@ -12,8 +12,10 @@ module.exports = (api, options, rootOptions, invoking) => {
       'test:unit': 'vue-cli-service test:unit'
     },
     devDependencies: {
-      'jest': '^26.6.3',
-      'vue-jest': isVue3 ? '^5.0.0-0' : '^4.0.1',
+      'babel-jest': '^27.0.6',
+      'jest': '^27.0.5',
+      '@vue/vue2-jest': isVue3 ? undefined : '^27.0.0-alpha.2',
+      '@vue/vue3-jest': isVue3 ? '^27.0.0-alpha.1' : undefined,
       '@vue/test-utils': isVue3 ? '^2.0.0-0' : '^1.1.3'
     },
     jest: {
@@ -58,8 +60,8 @@ const applyTS = (module.exports.applyTS = (api, invoking) => {
         : '@vue/cli-plugin-unit-jest/presets/typescript'
     },
     devDependencies: {
-      '@types/jest': '^26.0.20',
-      'ts-jest': '^26.5.3'
+      '@types/jest': '^27.0.1',
+      'ts-jest': '^27.0.4'
     }
   })
 

packages/@vue/cli-plugin-unit-jest/migrator/index.js

@@ -2,7 +2,7 @@
 module.exports = (api) => {
   api.extendPackage(pkg => {
     const newDevDeps = {
-      'jest': '^26.6.3'
+      'jest': '^27.1.0'
     }
 
     const allDeps = {
@@ -13,12 +13,11 @@ module.exports = (api) => {
 
     if (!allDeps['vue-jest']) {
       // Likely a Vue 2 project, and uses the builtin preset.
-      // Because we used to add `vue-jest` v5 to dev deps for Vue 3 projects.
-      newDevDeps['vue-jest'] = '^4.0.1'
+      newDevDeps['@vue/vue3-jest'] = '^27.0.0.alpha.1'
     }
 
     if (allDeps['@vue/cli-plugin-typescript'] && !allDeps['ts-jest']) {
-      newDevDeps['ts-jest'] = '^26.5.3'
+      newDevDeps['ts-jest'] = '^27.0.4'
     }
 
     const toMerge = { devDependencies: newDevDeps }

packages/@vue/cli-plugin-unit-jest/package.json

@@ -24,28 +24,36 @@
   },
   "dependencies": {
     "@babel/core": "^7.12.16",
-    "@babel/plugin-transform-modules-commonjs": "^7.12.13",
-    "@types/jest": "^26.0.20",
+    "@babel/plugin-transform-modules-commonjs": "^7.15.0",
+    "@types/jest": "^27.0.1",
     "@vue/cli-shared-utils": "^5.0.0-beta.3",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.1.0",
     "deepmerge": "^4.2.2",
-    "jest": "^26.6.3",
+    "jest": "^27.1.0",
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
     "jest-watch-typeahead": "^0.6.1"
   },
   "devDependencies": {
     "@vue/test-utils": "^1.1.3",
-    "ts-jest": "^26.5.3",
-    "vue-jest": "^4.0.1"
+    "@vue/vue2-jest": "^27.0.0-alpha.2",
+    "@vue/vue3-jest": "^27.0.0-alpha.1",
+    "ts-jest": "^27.0.4"
   },
   "peerDependencies": {
     "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0",
-    "jest": "^26.3.3",
-    "ts-jest": "^26.5.3",
-    "vue-jest": "^4.0.1 || ^5.0.0-0"
+    "@vue/vue2-jest": "^27.0.0-alpha.2",
+    "@vue/vue3-jest": "^27.0.0-alpha.1",
+    "jest": "^27.1.0",
+    "ts-jest": "^27.0.4"
   },
   "peerDependenciesMeta": {
+    "@vue/vue2-jest": {
+      "optional": true
+    },
+    "@vue/vue3-jest": {
+      "optional": true
+    },
     "ts-jest": {
       "optional": true
     }

packages/@vue/cli-plugin-unit-jest/presets/default/jest-preset.js

@@ -1,11 +1,22 @@
+// eslint-disable-next-line node/no-extraneous-require
+const semver = require('semver')
+
+let vueVersion = 2
+try {
+  // eslint-disable-next-line node/no-extraneous-require
+  const Vue = require('vue')
+  vueVersion = semver.major(Vue.version)
+} catch (e) {}
+
 let vueJest = null
 try {
-  vueJest = require.resolve('vue-jest')
+  vueJest = require.resolve(`@vue/vue${vueVersion}-jest`)
 } catch (e) {
-  throw new Error('Cannot resolve "vue-jest" module. Please make sure you have installed "vue-jest" as a dev dependency.')
+  throw new Error(`Cannot resolve "@vue/vue${vueVersion}-jest" module. Please make sure you have installed "@vue/vue${vueVersion}-jest" as a dev dependency.`)
 }
 
 module.exports = {
+  testEnvironment: 'jsdom',
   moduleFileExtensions: [
     'js',
     'jsx',

packages/@vue/cli-plugin-unit-jest/presets/no-babel/esmoduleTransformer.js

@@ -1,4 +1,4 @@
-const babelJest = require('babel-jest')
+const babelJest = require('babel-jest').default
 
 module.exports = babelJest.createTransformer({
   plugins: ['@babel/plugin-transform-modules-commonjs'],