Skip to content

Commit edf2633

Browse files
cexbrayatcexbrayat
authored
feat: add styles support for vue3-jest (#369)
1 parent 47244cd commit edf2633

File tree

9 files changed

+84
-87
lines changed

9 files changed

+84
-87
lines changed

‎e2e/3.x/custom-transformers/components/Scss.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
3-
<span :class="this.$style.g"></span>
4-
<span :class="this.$style.dark.f"></span>
3+
<span :class="$style.g"></span>
4+
<span :class="$style.dark.f"></span>
55
</div>
66
</template>
77

‎e2e/3.x/custom-transformers/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"devDependencies": {
1414
"@babel/core": "^7.9.0",
1515
"@babel/preset-env": "^7.9.0",
16+
"@vue/test-utils": "^2.0.0-rc.10",
1617
"babel-jest": "^27.0.0",
1718
"extract-from-css": "^0.4.4",
1819
"jest": "^27.0.0",
@@ -22,6 +23,7 @@
2223
"vue3-jest": "^27.0.0-alpha.1"
2324
},
2425
"jest": {
26+
"testEnvironment": "jsdom",
2527
"moduleFileExtensions": [
2628
"js",
2729
"json",

‎e2e/3.x/custom-transformers/test.js‎

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
1-
// import { createApp, h } from 'vue'
2-
3-
// import Scss from './components/Scss.vue'
4-
5-
// function mount(Component, props, slots) {
6-
// document.getElementsByTagName('html')[0].innerHTML = ''
7-
// const el = document.createElement('div')
8-
// el.id = 'app'
9-
// document.body.appendChild(el)
10-
// const Parent = {
11-
// render() {
12-
// return h(Component, props, slots)
13-
// }
14-
// }
15-
// createApp(Parent).mount(el)
16-
// }
17-
18-
// TODO: Figure this out with Vue 3. `$style` no longer exists.
19-
test.todo('processes SCSS using user specified post transforms')
20-
21-
test.todo('processes SCSS using user specified pre transforms')
1+
import { mount } from '@vue/test-utils'
2+
import Scss from './components/Scss.vue'
3+
4+
test('processes SCSS using user specified post transforms', () => {
5+
const wrapper = mount(Scss)
6+
expect(wrapper.vm.$style.light.a).toBeUndefined()
7+
expect(wrapper.vm.$style.light.f).toEqual('f')
8+
expect(wrapper.vm.$style.dark.f).toEqual('f')
9+
expect(wrapper.vm.$style.dark.g).toEqual('g')
10+
})
11+
12+
test('processes SCSS using user specified pre transforms', () => {
13+
const wrapper = mount(Scss)
14+
expect(wrapper.vm.$style.g).toEqual('g')
15+
})

‎e2e/3.x/style/components/External.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66

77
<style module src="./styles/external.css" />
88

9+
<style module="$style2" src="~__styles/external.css" />
10+
11+
<style module="$style3" src="./styles/external.css"></style>
12+
913
<style module="css">
1014
.a {
1115
background: color(red a(90%));

‎e2e/3.x/style/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"devDependencies": {
1414
"@babel/core": "^7.9.0",
1515
"@babel/preset-env": "^7.9.0",
16-
"@vue/test-utils": "^1.1.0",
16+
"@vue/test-utils": "^2.0.0-rc.10",
1717
"jest": "^27.0.0",
1818
"less": "^3.9.0",
1919
"postcss": "^7.0.13",

‎e2e/3.x/style/test.js‎

Lines changed: 23 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
// TODO: Support styles
2-
//
3-
import { createApp, h } from 'vue'
1+
import { mount } from '@vue/test-utils'
42

53
import Less from './components/Less.vue'
64
import Stylus from './components/Stylus.vue'
@@ -9,73 +7,42 @@ import Sass from './components/Sass.vue'
97
import PostCss from './components/PostCss.vue'
108
import External from './components/External.vue'
119

12-
function mount(Component, props, slots) {
13-
document.getElementsByTagName('html')[0].innerHTML = ''
14-
const el = document.createElement('div')
15-
el.id = 'app'
16-
document.body.appendChild(el)
17-
const Parent = {
18-
render() {
19-
return h(Component, props, slots)
20-
}
21-
}
22-
createApp(Parent).mount(el)
23-
}
24-
2510
test('processes Less', () => {
26-
mount(Less)
27-
expect(document.getElementById('app').innerHTML).toEqual(
28-
'<div><div class="a">a</div><div class="b">b</div><div class="c">c</div><div class="d">d</div></div>'
29-
)
11+
const wrapper = mount(Less)
12+
expect(wrapper.vm.$style.a).toEqual('a')
3013
})
3114

3215
test('processes PostCSS', () => {
33-
mount(PostCss)
34-
expect(document.getElementById('app').innerHTML).toEqual(
35-
'<section><div class="c"></div><div class="d"></div></section>'
36-
)
37-
// expect(wrapper.is('section')).toBeTruthy()
38-
// expect(wrapper.vm.$style.a).toEqual('a')
39-
// expect(wrapper.vm.$style.b).toEqual('b')
16+
const wrapper = mount(PostCss)
17+
expect(wrapper.vm.$style.c).toEqual('c')
18+
expect(wrapper.vm.$style.d).toEqual('d')
4019
})
4120

4221
test('processes Sass', () => {
43-
mount(Sass)
44-
expect(document.getElementById('app').innerHTML).toEqual(
45-
'<div><div class="a"></div><div class="b"></div><div class="c"></div><div class=""></div><div class="e"></div></div>'
46-
)
47-
// expect(wrapper.vm.$style.a).toEqual('a')
48-
// expect(wrapper.vm.$style.b).toEqual('b')
49-
// expect(wrapper.vm.$style.c).toEqual('c')
50-
// expect(wrapper.vm.$style.light).toBeUndefined()
22+
const wrapper = mount(Sass)
23+
expect(wrapper.vm.$style.a).toEqual('a')
24+
expect(wrapper.vm.$style.b).toEqual('b')
25+
expect(wrapper.vm.$style.c).toEqual('c')
26+
expect(wrapper.vm.$style.light).toBeUndefined()
5127
})
5228

5329
test('processes SCSS with resources', () => {
54-
mount(Scss)
55-
expect(document.getElementById('app').innerHTML).toEqual(
56-
'<div><div class="a"></div><div class="b"></div><div class="c"></div><div class=""></div><div class=""></div><div class="f"></div></div>'
57-
)
58-
// expect(wrapper.vm.$style.a).toEqual('a')
59-
// expect(wrapper.vm.$style.b).toEqual('b')
60-
// expect(wrapper.vm.$style.c).toEqual('c')
30+
const wrapper = mount(Scss)
31+
expect(wrapper.vm.$style.a).toEqual('a')
32+
expect(wrapper.vm.$style.b).toEqual('b')
33+
expect(wrapper.vm.$style.c).toEqual('c')
6134
})
6235

6336
test('process Stylus', () => {
64-
mount(Stylus)
65-
expect(document.getElementById('app').innerHTML).toEqual(
66-
'<div><div class="a"></div><div class="b"></div></div>'
67-
)
68-
// expect(wrapper.vm).toBeTruthy()
69-
// expect(wrapper.vm.css.a).toEqual('a')
70-
// expect(wrapper.vm.$style.b).toEqual('b')
37+
const wrapper = mount(Stylus)
38+
expect(wrapper.vm).toBeTruthy()
39+
expect(wrapper.vm.css.a).toEqual('a')
40+
expect(wrapper.vm.$style.b).toEqual('b')
7141
})
7242

7343
test('process External', () => {
74-
mount(External)
75-
expect(document.getElementById('app').innerHTML).toEqual(
76-
'<div class="testClass"><div class="a"></div></div>'
77-
)
78-
// expect(wrapper.vm).toBeTruthy()
79-
// expect(wrapper.vm.$style.xtestClass).toEqual('xtestClass')
80-
// expect(wrapper.vm.css.a).toEqual('a')
44+
const wrapper = mount(External)
45+
expect(wrapper.vm).toBeTruthy()
46+
expect(wrapper.vm.$style.testClass).toEqual('testClass')
47+
expect(wrapper.vm.css.a).toEqual('a')
8148
})

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

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ function extractClassMap(cssCode) {
3232
function getPreprocessOptions(lang, filePath, jestConfig) {
3333
if (lang === 'scss' || lang === 'sass') {
3434
return {
35-
importer: (url, prev, done) => ({
35+
importer: (url, prev) => ({
3636
file: applyModuleNameMapper(
3737
url,
3838
prev === 'stdin' ? filePath : prev,
@@ -52,8 +52,15 @@ function getPreprocessOptions(lang, filePath, jestConfig) {
5252
module.exports = function processStyle(stylePart, filePath, config = {}) {
5353
const vueJestConfig = getVueJestConfig(config)
5454

55-
if (stylePart.src && !stylePart.content) {
56-
stylePart.content = loadSrc(stylePart.src, filePath)
55+
if (stylePart.src && !stylePart.content.trim()) {
56+
const cssFilePath = applyModuleNameMapper(
57+
stylePart.src,
58+
filePath,
59+
config.config,
60+
stylePart.lang
61+
)
62+
stylePart.content = loadSrc(cssFilePath, filePath)
63+
filePath = cssFilePath
5764
}
5865

5966
if (vueJestConfig.experimentalCSSCompile === false || !stylePart.content) {
@@ -69,12 +76,22 @@ module.exports = function processStyle(stylePart, filePath, config = {}) {
6976

7077
// pre process
7178
if (transformer.preprocess) {
72-
content = transformer.preprocess(content, filePath, config, stylePart.attrs)
79+
content = transformer.preprocess(
80+
content,
81+
filePath,
82+
config.config,
83+
stylePart.attrs
84+
)
7385
}
7486

7587
// transform
7688
if (transformer.process) {
77-
content = transformer.process(content, filePath, config, stylePart.attrs)
89+
content = transformer.process(
90+
content,
91+
filePath,
92+
config.config,
93+
stylePart.attrs
94+
)
7895
} else {
7996
const preprocessOptions = getPreprocessOptions(
8097
stylePart.lang,
@@ -95,7 +112,12 @@ module.exports = function processStyle(stylePart, filePath, config = {}) {
95112

96113
// post process
97114
if (transformer.postprocess) {
98-
return transformer.postprocess(content, filePath, config, stylePart.attrs)
115+
return transformer.postprocess(
116+
content,
117+
filePath,
118+
config.config,
119+
stylePart.attrs
120+
)
99121
}
100122

101123
return JSON.stringify(extractClassMap(content))

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,10 @@ function processTemplate(descriptor, filename, config) {
108108
return { code: outputText }
109109
} else {
110110
// babel
111-
const babelify = transform(result.code, { filename: 'file.js' })
111+
const babelify = transform(result.code, {
112+
filename: 'file.js',
113+
presets: ['@babel/preset-env']
114+
})
112115

113116
return {
114117
code: babelify.code

‎yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1763,6 +1763,11 @@
17631763
lodash "^4.17.15"
17641764
pretty "^2.0.0"
17651765

1766+
"@vue/test-utils@^2.0.0-rc.10":
1767+
version "2.0.0-rc.10"
1768+
resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.0-rc.10.tgz#9ed689cd7d5a1c9ef6693806010e464d2ecc13b2"
1769+
integrity sha512-Z8jY+askU08svsI37NcJSLmWrfkZ/1ATA1DENWezRUX2uv3QyEj7idwx+rfeNSOrlNNBh4NTzypBKOUOklxBRA==
1770+
17661771
JSONStream@^1.0.4, JSONStream@^1.3.4, JSONStream@^1.3.5:
17671772
version "1.3.5"
17681773
resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"

0 commit comments

Comments
 (0)