feat: add styles support for vue3-jest (#369)

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>
 

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

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

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%));

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

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

packages/vue3-jest/lib/process-style.js

@@ -32,7 +32,7 @@ function extractClassMap(cssCode) {
 function getPreprocessOptions(lang, filePath, jestConfig) {
   if (lang === 'scss' || lang === 'sass') {
     return {
-      importer: (url, prev, done) => ({
+      importer: (url, prev) => ({
         file: applyModuleNameMapper(
           url,
           prev === 'stdin' ? filePath : prev,
@@ -52,8 +52,15 @@ function getPreprocessOptions(lang, filePath, jestConfig) {
 module.exports = function processStyle(stylePart, filePath, config = {}) {
   const vueJestConfig = getVueJestConfig(config)
 
-  if (stylePart.src && !stylePart.content) {
-    stylePart.content = loadSrc(stylePart.src, filePath)
+  if (stylePart.src && !stylePart.content.trim()) {
+    const cssFilePath = applyModuleNameMapper(
+      stylePart.src,
+      filePath,
+      config.config,
+      stylePart.lang
+    )
+    stylePart.content = loadSrc(cssFilePath, filePath)
+    filePath = cssFilePath
   }
 
   if (vueJestConfig.experimentalCSSCompile === false || !stylePart.content) {
@@ -69,12 +76,22 @@ module.exports = function processStyle(stylePart, filePath, config = {}) {
 
   // pre process
   if (transformer.preprocess) {
-    content = transformer.preprocess(content, filePath, config, stylePart.attrs)
+    content = transformer.preprocess(
+      content,
+      filePath,
+      config.config,
+      stylePart.attrs
+    )
   }
 
   // transform
   if (transformer.process) {
-    content = transformer.process(content, filePath, config, stylePart.attrs)
+    content = transformer.process(
+      content,
+      filePath,
+      config.config,
+      stylePart.attrs
+    )
   } else {
     const preprocessOptions = getPreprocessOptions(
       stylePart.lang,
@@ -95,7 +112,12 @@ module.exports = function processStyle(stylePart, filePath, config = {}) {
 
   // post process
   if (transformer.postprocess) {
-    return transformer.postprocess(content, filePath, config, stylePart.attrs)
+    return transformer.postprocess(
+      content,
+      filePath,
+      config.config,
+      stylePart.attrs
+    )
   }
 
   return JSON.stringify(extractClassMap(content))

packages/vue3-jest/lib/process.js

@@ -108,7 +108,10 @@ function processTemplate(descriptor, filename, config) {
     return { code: outputText }
   } else {
     // babel
-    const babelify = transform(result.code, { filename: 'file.js' })
+    const babelify = transform(result.code, {
+      filename: 'file.js',
+      presets: ['@babel/preset-env']
+    })
 
     return {
       code: babelify.code

yarn.lock

@@ -1763,6 +1763,11 @@
     lodash "^4.17.15"
     pretty "^2.0.0"
 
+"@vue/test-utils@^2.0.0-rc.10":
+  version "2.0.0-rc.10"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.0-rc.10.tgz#9ed689cd7d5a1c9ef6693806010e464d2ecc13b2"
+  integrity sha512-Z8jY+askU08svsI37NcJSLmWrfkZ/1ATA1DENWezRUX2uv3QyEj7idwx+rfeNSOrlNNBh4NTzypBKOUOklxBRA==
+
 JSONStream@^1.0.4, JSONStream@^1.3.4, JSONStream@^1.3.5:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"