feat: support jest v27 in vue3-jest

.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
 

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",

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",

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",

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()
 })

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']
 })

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": [

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",

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",

e2e/3.x/typescript-with-babel/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "vue3-typescript-with-babel",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "test": "jest --no-cache ./sub-project/test.js"
+  },
+  "dependencies": {
+    "@vue/compiler-sfc": "^3.0.3",
+    "vue": "^3.0.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "jest": "^27.0.0",
+    "ts-jest": "^27.0.1",
+    "typescript": "^4.1.2",
+    "vue3-jest": "^27.0.0-alpha.1"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "globals": {
+      "vue-jest": {
+        "tsConfig": "./sub-project/tsconfig.json"
+      }
+    },
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "vue"
+    ],
+    "transform": {
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.vue$": "vue3-jest"
+    }
+  },
+  "babel": {
+    "presets": [
+      "@babel/env"
+    ]
+  }
+}

e2e/3.x/typescript/package.json

@@ -4,39 +4,33 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "test": "jest --no-cache ./sub-project/test.js"
+    "test": "jest --no-cache ./src/test.ts"
   },
   "dependencies": {
     "@vue/compiler-sfc": "^3.0.3",
     "vue": "^3.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
-    "jest": "^26.0.0",
-    "ts-jest": "^26.4.4",
+    "@types/jest": "16.0.10",
+    "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": {
-    "globals": {
-      "vue-jest": {
-        "tsConfig": "./sub-project/tsconfig.json"
-      }
-    },
+    "testEnvironment": "jsdom",
     "moduleFileExtensions": [
       "js",
+      "ts",
       "json",
       "vue"
     ],
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/src/$1"
+    },
     "transform": {
-      "^.+\\.js$": "babel-jest",
+      "^.+\\.ts$": "ts-jest",
       "^.+\\.vue$": "vue3-jest"
     }
-  },
-  "babel": {
-    "presets": [
-      "@babel/env"
-    ]
   }
 }

e2e/3.x/typescript/src/components/Basic.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="hello">
+    <h1 :class="headingClasses">{{ msg }}</h1>
+  </div>
+</template>
+
+<style module="css">
+.testA {
+  background-color: red;
+}
+</style>
+<style module>
+.testB {
+  background-color: blue;
+}
+</style>
+<style>
+.testC {
+  background-color: blue;
+}
+</style>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'basic',
+  setup() {
+    const msg = 'Welcome to Your Vue.js App'
+    const isCrazy = ref(false)
+    const headingClasses = computed(() => ({
+      red: isCrazy,
+      blue: !isCrazy,
+      shadow: isCrazy
+    }))
+    const toggleClass = () => (isCrazy.value = !isCrazy.value)
+    return {
+      msg,
+      isCrazy,
+      headingClasses,
+      toggleClass
+    }
+  }
+})
+</script>

e2e/3.x/typescript/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

e2e/3.x/typescript/src/test.ts

@@ -0,0 +1,23 @@
+import { createApp, h } from 'vue'
+
+import Basic from '@/components/Basic.vue'
+
+function mount(Component: any) {
+  document.getElementsByTagName('html')[0].innerHTML = ''
+  const el = document.createElement('div')
+  el.id = 'app'
+  document.body.appendChild(el)
+  const Parent = {
+    render() {
+      return h(Component)
+    }
+  }
+  createApp(Parent).mount(el)
+}
+
+test('processes .vue files', () => {
+  mount(Basic)
+  expect(document.querySelector('h1')!.textContent).toBe(
+    'Welcome to Your Vue.js App'
+  )
+})

e2e/3.x/typescript/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": ["webpack-env", "jest"],
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"],
+  "exclude": ["node_modules"]
+}

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
         }),

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}`,

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')

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)