Merge branch 'master' of github.com:vuejs/vue-jest

lmiller1990 · lmiller1990 · commit 630c526ec2f2 · 2021-08-02T12:12:49.000+10:00
diff --git a/e2e/2.x/babel-in-package/package.json b/e2e/2.x/babel-in-package/package.json
@@ -16,12 +16,13 @@
     "@babel/preset-env": "^7.9.0",
     "@vue/test-utils": "^1.1.0",
     "coffeescript": "^2.3.2",
-    "jest": "26.x",
-    "ts-jest": "^26.3.0",
+    "jest": "27.x",
+    "ts-jest": "^27.0.4",
     "typescript": "^3.2.2",
-    "vue2-jest": "~26.0.0"
+    "vue2-jest": "~27.0.0-alpha.1"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "moduleFileExtensions": [
       "js",
       "json",
diff --git a/e2e/2.x/basic/package.json b/e2e/2.x/basic/package.json
@@ -19,14 +19,15 @@
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "coffeescript": "^2.3.2",
     "jade": "^1.11.0",
-    "jest": "26.x",
+    "jest": "27.x",
     "pug": "^3.0.1",
     "sass": "^1.23.7",
-    "ts-jest": "^26.3.0",
+    "ts-jest": "^27.0.4",
     "typescript": "^3.2.2",
-    "vue2-jest": "~26.0.0"
+    "vue2-jest": "~27.0.0-alpha.1"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "moduleFileExtensions": [
       "js",
       "json",
diff --git a/e2e/2.x/basic/test.js b/e2e/2.x/basic/test.js
@@ -38,9 +38,12 @@ 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 config = {
+    moduleFileExtensions: ['js', 'vue']
+  }
 
   const { map } = jestVue.process(fileString, filePath, {
-    moduleFileExtensions: ['js', 'vue']
+    config
   })
 
   expect(map).toMatchSnapshot()
@@ -50,8 +53,12 @@ test('generates source maps using src attributes', () => {
   const filePath = resolve(__dirname, './components/SourceMapsSrc.vue')
   const fileString = readFileSync(filePath, { encoding: 'utf8' })
 
-  const { map } = jestVue.process(fileString, filePath, {
+  const config = {
     moduleFileExtensions: ['js', 'vue']
+  }
+
+  const { map } = jestVue.process(fileString, filePath, {
+    config
   })
 
   expect(map).toMatchSnapshot()
diff --git a/e2e/2.x/custom-transformers/babel-transformer.js b/e2e/2.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/2.x/custom-transformers/package.json b/e2e/2.x/custom-transformers/package.json
@@ -14,14 +14,15 @@
     "@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",
+    "babel-jest": "^27.0.6",
+    "jest": "27.x",
     "postcss": "^7.0.13",
     "postcss-color-function": "^4.0.1",
     "sass": "^1.23.7",
-    "vue2-jest": "~26.0.0"
+    "vue2-jest": "~27.0.0-alpha.1"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "moduleFileExtensions": [
       "js",
       "json",
diff --git a/e2e/2.x/style/package.json b/e2e/2.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.x",
+    "jest": "27.x",
     "less": "^3.9.0",
     "postcss": "^7.0.13",
     "sass": "^1.23.7",
     "stylus": "^0.54.5",
-    "vue2-jest": "~26.0.0"
+    "vue2-jest": "~27.0.0-alpha.1"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "moduleFileExtensions": [
       "js",
       "json",
diff --git a/e2e/3.x/custom-transformers/components/Scss.vue b/e2e/3.x/custom-transformers/components/Scss.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <span :class="this.$style.g"></span>
-    <span :class="this.$style.dark.f"></span>
+    <span :class="$style.g"></span>
+    <span :class="$style.dark.f"></span>
   </div>
 </template>
 
diff --git a/e2e/3.x/custom-transformers/package.json b/e2e/3.x/custom-transformers/package.json
@@ -13,6 +13,7 @@
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
+    "@vue/test-utils": "^2.0.0-rc.10",
     "babel-jest": "^27.0.0",
     "extract-from-css": "^0.4.4",
     "jest": "^27.0.0",
@@ -22,6 +23,7 @@
     "vue3-jest": "^27.0.0-alpha.1"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "moduleFileExtensions": [
       "js",
       "json",
diff --git a/e2e/3.x/custom-transformers/test.js b/e2e/3.x/custom-transformers/test.js
@@ -1,21 +1,15 @@
-// import { createApp, h } from 'vue'
-
-// import Scss from './components/Scss.vue'
-
-// function mount(Component, props, slots) {
-//   document.getElementsByTagName('html')[0].innerHTML = ''
-//   const el = document.createElement('div')
-//   el.id = 'app'
-//   document.body.appendChild(el)
-//   const Parent = {
-//     render() {
-//       return h(Component, props, slots)
-//     }
-//   }
-//   createApp(Parent).mount(el)
-// }
-
-// TODO: Figure this out with Vue 3. `$style` no longer exists.
-test.todo('processes SCSS using user specified post transforms')
-
-test.todo('processes SCSS using user specified pre transforms')
+import { mount } from '@vue/test-utils'
+import Scss from './components/Scss.vue'
+
+test('processes SCSS using user specified post transforms', () => {
+  const wrapper = mount(Scss)
+  expect(wrapper.vm.$style.light.a).toBeUndefined()
+  expect(wrapper.vm.$style.light.f).toEqual('f')
+  expect(wrapper.vm.$style.dark.f).toEqual('f')
+  expect(wrapper.vm.$style.dark.g).toEqual('g')
+})
+
+test('processes SCSS using user specified pre transforms', () => {
+  const wrapper = mount(Scss)
+  expect(wrapper.vm.$style.g).toEqual('g')
+})
diff --git a/e2e/3.x/style/components/External.vue b/e2e/3.x/style/components/External.vue
@@ -6,6 +6,10 @@
 
 <style module src="./styles/external.css" />
 
+<style module="$style2" src="~__styles/external.css" />
+
+<style module="$style3" src="./styles/external.css"></style>
+
 <style module="css">
 .a {
   background: color(red a(90%));
diff --git a/e2e/3.x/style/package.json b/e2e/3.x/style/package.json
@@ -13,7 +13,7 @@
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
-    "@vue/test-utils": "^1.1.0",
+    "@vue/test-utils": "^2.0.0-rc.10",
     "jest": "^27.0.0",
     "less": "^3.9.0",
     "postcss": "^7.0.13",
diff --git a/e2e/3.x/style/test.js b/e2e/3.x/style/test.js
@@ -1,6 +1,4 @@
-// TODO: Support styles
-//
-import { createApp, h } from 'vue'
+import { mount } from '@vue/test-utils'
 
 import Less from './components/Less.vue'
 import Stylus from './components/Stylus.vue'
@@ -9,73 +7,42 @@ import Sass from './components/Sass.vue'
 import PostCss from './components/PostCss.vue'
 import External from './components/External.vue'
 
-function mount(Component, props, slots) {
-  document.getElementsByTagName('html')[0].innerHTML = ''
-  const el = document.createElement('div')
-  el.id = 'app'
-  document.body.appendChild(el)
-  const Parent = {
-    render() {
-      return h(Component, props, slots)
-    }
-  }
-  createApp(Parent).mount(el)
-}
-
 test('processes Less', () => {
-  mount(Less)
-  expect(document.getElementById('app').innerHTML).toEqual(
-    '<div><div class="a">a</div><div class="b">b</div><div class="c">c</div><div class="d">d</div></div>'
-  )
+  const wrapper = mount(Less)
+  expect(wrapper.vm.$style.a).toEqual('a')
 })
 
 test('processes PostCSS', () => {
-  mount(PostCss)
-  expect(document.getElementById('app').innerHTML).toEqual(
-    '<section><div class="c"></div><div class="d"></div></section>'
-  )
-  // expect(wrapper.is('section')).toBeTruthy()
-  // expect(wrapper.vm.$style.a).toEqual('a')
-  // expect(wrapper.vm.$style.b).toEqual('b')
+  const wrapper = mount(PostCss)
+  expect(wrapper.vm.$style.c).toEqual('c')
+  expect(wrapper.vm.$style.d).toEqual('d')
 })
 
 test('processes Sass', () => {
-  mount(Sass)
-  expect(document.getElementById('app').innerHTML).toEqual(
-    '<div><div class="a"></div><div class="b"></div><div class="c"></div><div class=""></div><div class="e"></div></div>'
-  )
-  // expect(wrapper.vm.$style.a).toEqual('a')
-  // expect(wrapper.vm.$style.b).toEqual('b')
-  // expect(wrapper.vm.$style.c).toEqual('c')
-  // expect(wrapper.vm.$style.light).toBeUndefined()
+  const wrapper = mount(Sass)
+  expect(wrapper.vm.$style.a).toEqual('a')
+  expect(wrapper.vm.$style.b).toEqual('b')
+  expect(wrapper.vm.$style.c).toEqual('c')
+  expect(wrapper.vm.$style.light).toBeUndefined()
 })
 
 test('processes SCSS with resources', () => {
-  mount(Scss)
-  expect(document.getElementById('app').innerHTML).toEqual(
-    '<div><div class="a"></div><div class="b"></div><div class="c"></div><div class=""></div><div class=""></div><div class="f"></div></div>'
-  )
-  // expect(wrapper.vm.$style.a).toEqual('a')
-  // expect(wrapper.vm.$style.b).toEqual('b')
-  // expect(wrapper.vm.$style.c).toEqual('c')
+  const wrapper = mount(Scss)
+  expect(wrapper.vm.$style.a).toEqual('a')
+  expect(wrapper.vm.$style.b).toEqual('b')
+  expect(wrapper.vm.$style.c).toEqual('c')
 })
 
 test('process Stylus', () => {
-  mount(Stylus)
-  expect(document.getElementById('app').innerHTML).toEqual(
-    '<div><div class="a"></div><div class="b"></div></div>'
-  )
-  // expect(wrapper.vm).toBeTruthy()
-  // expect(wrapper.vm.css.a).toEqual('a')
-  // expect(wrapper.vm.$style.b).toEqual('b')
+  const wrapper = mount(Stylus)
+  expect(wrapper.vm).toBeTruthy()
+  expect(wrapper.vm.css.a).toEqual('a')
+  expect(wrapper.vm.$style.b).toEqual('b')
 })
 
 test('process External', () => {
-  mount(External)
-  expect(document.getElementById('app').innerHTML).toEqual(
-    '<div class="testClass"><div class="a"></div></div>'
-  )
-  // expect(wrapper.vm).toBeTruthy()
-  // expect(wrapper.vm.$style.xtestClass).toEqual('xtestClass')
-  // expect(wrapper.vm.css.a).toEqual('a')
+  const wrapper = mount(External)
+  expect(wrapper.vm).toBeTruthy()
+  expect(wrapper.vm.$style.testClass).toEqual('testClass')
+  expect(wrapper.vm.css.a).toEqual('a')
 })
diff --git a/packages/vue2-jest/lib/index.js b/packages/vue2-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/vue2-jest/lib/process-style.js b/packages/vue2-jest/lib/process-style.js
@@ -56,7 +56,7 @@ module.exports = function processStyle(stylePart, filePath, config = {}) {
     const cssFilePath = applyModuleNameMapper(
       stylePart.src,
       filePath,
-      config,
+      config.config,
       stylePart.lang
     )
     stylePart.content = loadSrc(cssFilePath, filePath)
@@ -86,7 +86,7 @@ module.exports = function processStyle(stylePart, filePath, config = {}) {
     const preprocessOptions = getPreprocessOptions(
       stylePart.lang,
       filePath,
-      config
+      config.config
     )
     const result = compileStyle({
       source: content,
diff --git a/packages/vue2-jest/lib/process.js b/packages/vue2-jest/lib/process.js
@@ -10,7 +10,7 @@ const logResultErrors = require('./utils').logResultErrors
 const stripInlineSourceMap = require('./utils').stripInlineSourceMap
 const getCustomTransformer = require('./utils').getCustomTransformer
 const loadSrc = require('./utils').loadSrc
-const babelTransformer = require('babel-jest')
+const babelTransformer = require('babel-jest').default
 const compilerUtils = require('@vue/component-compiler-utils')
 const generateCode = require('./generate-code')
 
diff --git a/packages/vue2-jest/lib/transformers/coffee.js b/packages/vue2-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/vue2-jest/lib/transformers/typescript.js b/packages/vue2-jest/lib/transformers/typescript.js
diff --git a/packages/vue2-jest/lib/utils.js b/packages/vue2-jest/lib/utils.js
diff --git a/packages/vue2-jest/package.json b/packages/vue2-jest/package.json
diff --git a/packages/vue3-jest/lib/process-style.js b/packages/vue3-jest/lib/process-style.js
diff --git a/packages/vue3-jest/lib/process.js b/packages/vue3-jest/lib/process.js
diff --git a/yarn.lock b/yarn.lock
