Skip to content

Commit 6992166

Browse files
ShuZhongShuZhong
committed
fix: v-bind(css) + number prefix folder path + windows : make a syntax error
1 parent d61d430 commit 6992166

File tree

14 files changed

+229
-9
lines changed

14 files changed

+229
-9
lines changed

‎e2e/3.x/00-win-path/babel.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: ['@babel/preset-env']
3+
}

‎e2e/3.x/00-win-path/components/Basic.vue

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div class="hello">
3+
<h1 :class="headingClasses">
4+
{{ msg }}
5+
</h1>
6+
</div>
7+
</template>
8+
9+
<style module="css">
10+
.testA {
11+
background-color: red;
12+
}
13+
</style>
14+
<style module>
15+
.testB {
16+
background-color: blue;
17+
}
18+
</style>
19+
<style>
20+
.testC {
21+
background-color: blue;
22+
}
23+
</style>
24+
25+
<script>
26+
export default {
27+
name: 'Basic',
28+
data: function data() {
29+
return {
30+
msg: 'Welcome to Your Vue.js App',
31+
isCrazy: false
32+
}
33+
},
34+
computed: {
35+
headingClasses: function headingClasses() {
36+
return {
37+
red: this.isCrazy,
38+
blue: !this.isCrazy,
39+
shadow: this.isCrazy
40+
}
41+
}
42+
},
43+
methods: {
44+
toggleClass: function toggleClass() {
45+
this.isCrazy = !this.isCrazy
46+
}
47+
}
48+
}
49+
</script>

‎e2e/3.x/00-win-path/components/BindCss.vue

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<div class="testA">
3+
{{ sizeA }}
4+
</div>
5+
<div class="testB">
6+
{{ sizeB }}
7+
</div>
8+
<div class="testC">
9+
{{ sizeC.val }}
10+
</div>
11+
</template>
12+
13+
<style scoped>
14+
.testA {
15+
background-color: red;
16+
width: v-bind('sizeA');
17+
height: v-bind('sizeA');
18+
}
19+
</style>
20+
<style module>
21+
.testB {
22+
background-color: blue;
23+
width: v-bind('sizeB');
24+
height: v-bind('sizeB');
25+
}
26+
</style>
27+
<style>
28+
.testC {
29+
background-color: blue;
30+
width: v-bind('sizeC.val');
31+
height: v-bind('sizeC.val');
32+
}
33+
</style>
34+
35+
<script setup>
36+
import { ref } from 'vue'
37+
38+
const sizeA = ref('100px')
39+
const sizeB = '100px'
40+
const sizeC = {
41+
val: '100px'
42+
}
43+
</script>

‎e2e/3.x/00-win-path/jest.config.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const vTestDirective = require('./v-test-directive')
2+
3+
module.exports = {
4+
testEnvironment: 'jsdom',
5+
moduleFileExtensions: ['js', 'json', 'vue', 'ts'],
6+
transform: {
7+
'^.+\\.ts$': 'ts-jest',
8+
'^.+\\.js$': 'babel-jest',
9+
'^.+\\.vue$': '@vue/vue3-jest'
10+
},
11+
moduleNameMapper: {
12+
'^~?__styles/(.*)$': '<rootDir>/components/styles/$1'
13+
},
14+
globals: {
15+
'vue-jest': {
16+
compilerOptions: {
17+
directiveTransforms: {
18+
test: vTestDirective
19+
}
20+
}
21+
}
22+
}
23+
}

‎e2e/3.x/00-win-path/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "vue3-00-win-path",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"private": true,
6+
"scripts": {
7+
"test": "jest --no-cache --coverage test.js"
8+
},
9+
"dependencies": {
10+
"vue": "^3.2.22"
11+
},
12+
"devDependencies": {
13+
"@babel/core": "^7.9.0",
14+
"@babel/preset-env": "^7.9.0",
15+
"@vue/vue3-jest": "^29.0.0",
16+
"jest": "29.x",
17+
"jest-environment-jsdom": "29.x",
18+
"ts-jest": "^29.0.0-next.0",
19+
"typescript": "^4.6.4"
20+
}
21+
}

‎e2e/3.x/00-win-path/test.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { createApp, h } from 'vue'
2+
3+
import Basic from './components/Basic.vue'
4+
import BindCss from './components/BindCss.vue'
5+
6+
function mount(Component, props, slots) {
7+
document.getElementsByTagName('html')[0].innerHTML = ''
8+
const el = document.createElement('div')
9+
el.id = 'app'
10+
document.body.appendChild(el)
11+
const Parent = {
12+
render() {
13+
return h(Component, props, slots)
14+
}
15+
}
16+
const app = createApp(Parent)
17+
app.directive('test', el => el.setAttribute('data-test', 'value'))
18+
app.mount(el)
19+
}
20+
21+
test('processes .vue files', () => {
22+
mount(Basic)
23+
expect(document.querySelector('h1').textContent).toBe(
24+
'Welcome to Your Vue.js App'
25+
)
26+
})
27+
28+
test('process .vue with v-bind(css) in style block', () => {
29+
mount(BindCss)
30+
31+
expect(document.querySelector('.testA').textContent).toBe('100px')
32+
expect(document.querySelector('.testB').textContent).toBe('100px')
33+
expect(document.querySelector('.testC').textContent).toBe('100px')
34+
})

‎e2e/3.x/00-win-path/tsconfig.base.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": ["dom", "es6"],
5+
"module": "es2015",
6+
"moduleResolution": "node",
7+
"types": ["vue-typescript-import-dts", "node"],
8+
"isolatedModules": false,
9+
"experimentalDecorators": true,
10+
"noImplicitAny": true,
11+
"noImplicitThis": true,
12+
"strictNullChecks": true,
13+
"removeComments": true,
14+
"emitDecoratorMetadata": true,
15+
"suppressImplicitAnyIndexErrors": true,
16+
"allowSyntheticDefaultImports": true,
17+
"sourceMap": true,
18+
"esModuleInterop": true,
19+
"allowJs": true
20+
}
21+
}

‎e2e/3.x/00-win-path/tsconfig.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "./tsconfig.base.json"
3+
}

‎e2e/3.x/00-win-path/v-test-directive.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = (dir, node, ...args) => {
2+
return { needRuntime: false, props: [] }
3+
}

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "vue-jest-monorepo",
33
"private": true,
44
"engines": {
5-
"node": ">=10",
5+
"node": ">=18",
66
"yarn": "^1.17.3"
77
},
88
"workspaces": {
@@ -34,9 +34,9 @@
3434
"eslint-plugin-promise": "^4.0.1",
3535
"eslint-plugin-standard": "^4.0.0",
3636
"eslint-plugin-vue": "^5.1.0",
37-
"nanoid": "3.3.3",
3837
"husky": "^1.1.4",
3938
"lint-staged": "^8.0.5",
39+
"nanoid": "3.3.3",
4040
"postcss": "8.4.12",
4141
"prettier": "^1.16.1"
4242
},

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@ function getGlobalResources(resources, lang) {
1212
if (resources && resources[lang]) {
1313
globalResources = resources[lang]
1414
.map(resource => {
15-
const absolutePath = path.resolve(process.cwd(), resource)
15+
// need replace \ to / in windows
16+
const absolutePath = path
17+
.resolve(process.cwd(), resource)
18+
.replaceAll('\\', '/')
1619
return `${getImportLine(lang, absolutePath)}\n`
1720
})
1821
.join('')

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

+6-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const path = require('path')
33
const cssTree = require('css-tree')
44
const getVueJestConfig = require('./utils').getVueJestConfig
55
const applyModuleNameMapper = require('./module-name-mapper-helper')
6+
const { generateFileId } = require('./utils')
67
const getCustomTransformer = require('./utils').getCustomTransformer
78
const logResultErrors = require('./utils').logResultErrors
89
const loadSrc = require('./utils').loadSrc
@@ -12,7 +13,10 @@ function getGlobalResources(resources, lang) {
1213
if (resources && resources[lang]) {
1314
globalResources = resources[lang]
1415
.map(resource => {
15-
const absolutePath = path.resolve(process.cwd(), resource)
16+
// need replace \ to / in windows
17+
const absolutePath = path
18+
.resolve(process.cwd(), resource)
19+
.replaceAll('\\', '/')
1620
return `${getImportLine(lang, absolutePath)}\n`
1721
})
1822
.join('')
@@ -111,7 +115,7 @@ module.exports = function processStyle(stylePart, filePath, config = {}) {
111115
config.config
112116
)
113117
const result = compileStyle({
114-
id: `vue-jest-${filePath}`,
118+
id: `vue-jest-${generateFileId(filePath)}`,
115119
source: content,
116120
filePath,
117121
preprocessLang: stylePart.lang,

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const getCustomTransformer = require('./utils').getCustomTransformer
1414
const loadSrc = require('./utils').loadSrc
1515
const generateCode = require('./generate-code')
1616
const mapLines = require('./map-lines')
17+
const { generateFileId } = require('./utils')
1718
const vueComponentNamespace = require('./constants').vueComponentNamespace
1819

1920
function resolveTransformer(lang = 'js', vueJestConfig) {
@@ -54,7 +55,7 @@ function processScriptSetup(descriptor, filePath, config) {
5455
}
5556
const vueJestConfig = getVueJestConfig(config)
5657
const content = compileScript(descriptor, {
57-
id: filePath,
58+
id: generateFileId(filePath),
5859
refTransform: true,
5960
...vueJestConfig.compilerOptions
6061
})
@@ -92,7 +93,7 @@ function processTemplate(descriptor, filename, config) {
9293
let bindings
9394
if (scriptSetup) {
9495
const scriptSetupResult = compileScript(descriptor, {
95-
id: filename,
96+
id: generateFileId(filename),
9697
refTransform: true,
9798
...vueJestConfig.compilerOptions
9899
})
@@ -109,7 +110,7 @@ function processTemplate(descriptor, filename, config) {
109110
const isTS = /^typescript$|tsx?$/.test(lang)
110111

111112
const result = compileTemplate({
112-
id: filename,
113+
id: generateFileId(filename),
113114
source: template.content,
114115
filename,
115116
preprocessLang: template.lang,

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

+13-1
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,17 @@ const loadSrc = (src, filePath) => {
193193
}
194194
}
195195

196+
/**
197+
* Replace windows path \ to ~ , and for consistency, also replace linux / to ~ .
198+
*
199+
* Fix issue:
200+
* https://github.com/vuejs/vue-jest/issues/544
201+
* https://github.com/vuejs/vue-jest/issues/549
202+
*/
203+
const generateFileId = filePath => {
204+
return filePath.replace(/[\\/]/g, '~')
205+
}
206+
196207
module.exports = {
197208
stripInlineSourceMap,
198209
throwError,
@@ -206,5 +217,6 @@ module.exports = {
206217
warn,
207218
resolvePath,
208219
fetchTransformer,
209-
loadSrc
220+
loadSrc,
221+
generateFileId
210222
}

0 commit comments

Comments
 (0)