diff --git a/e2e/3.x/00-win-path/babel.config.js b/e2e/3.x/00-win-path/babel.config.js
new file mode 100644
index 0000000..7db9b6f
--- /dev/null
+++ b/e2e/3.x/00-win-path/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+ presets: ['@babel/preset-env']
+}
diff --git a/e2e/3.x/00-win-path/components/Basic.vue b/e2e/3.x/00-win-path/components/Basic.vue
new file mode 100644
index 0000000..8592d74
--- /dev/null
+++ b/e2e/3.x/00-win-path/components/Basic.vue
@@ -0,0 +1,49 @@
+
+
+
+ {{ msg }}
+
+
+
+
+
+
+
+
+
diff --git a/e2e/3.x/00-win-path/components/BindCss.vue b/e2e/3.x/00-win-path/components/BindCss.vue
new file mode 100644
index 0000000..503d746
--- /dev/null
+++ b/e2e/3.x/00-win-path/components/BindCss.vue
@@ -0,0 +1,43 @@
+
+
+ {{ sizeA }}
+
+
+ {{ sizeB }}
+
+
+ {{ sizeC.val }}
+
+
+
+
+
+
+
+
diff --git a/e2e/3.x/00-win-path/jest.config.js b/e2e/3.x/00-win-path/jest.config.js
new file mode 100644
index 0000000..fcb5e65
--- /dev/null
+++ b/e2e/3.x/00-win-path/jest.config.js
@@ -0,0 +1,23 @@
+const vTestDirective = require('./v-test-directive')
+
+module.exports = {
+ testEnvironment: 'jsdom',
+ moduleFileExtensions: ['js', 'json', 'vue', 'ts'],
+ transform: {
+ '^.+\\.ts$': 'ts-jest',
+ '^.+\\.js$': 'babel-jest',
+ '^.+\\.vue$': '@vue/vue3-jest'
+ },
+ moduleNameMapper: {
+ '^~?__styles/(.*)$': '/components/styles/$1'
+ },
+ globals: {
+ 'vue-jest': {
+ compilerOptions: {
+ directiveTransforms: {
+ test: vTestDirective
+ }
+ }
+ }
+ }
+}
diff --git a/e2e/3.x/00-win-path/package.json b/e2e/3.x/00-win-path/package.json
new file mode 100644
index 0000000..389122d
--- /dev/null
+++ b/e2e/3.x/00-win-path/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "vue3-00-win-path",
+ "version": "1.0.0",
+ "license": "MIT",
+ "private": true,
+ "scripts": {
+ "test": "jest --no-cache --coverage test.js"
+ },
+ "dependencies": {
+ "vue": "^3.2.22"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.9.0",
+ "@babel/preset-env": "^7.9.0",
+ "@vue/vue3-jest": "^29.0.0",
+ "jest": "29.x",
+ "jest-environment-jsdom": "29.x",
+ "ts-jest": "^29.0.0-next.0",
+ "typescript": "^4.6.4"
+ }
+}
diff --git a/e2e/3.x/00-win-path/test.js b/e2e/3.x/00-win-path/test.js
new file mode 100644
index 0000000..69a4838
--- /dev/null
+++ b/e2e/3.x/00-win-path/test.js
@@ -0,0 +1,34 @@
+import { createApp, h } from 'vue'
+
+import Basic from './components/Basic.vue'
+import BindCss from './components/BindCss.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)
+ }
+ }
+ const app = createApp(Parent)
+ app.directive('test', el => el.setAttribute('data-test', 'value'))
+ app.mount(el)
+}
+
+test('processes .vue files', () => {
+ mount(Basic)
+ expect(document.querySelector('h1').textContent).toBe(
+ 'Welcome to Your Vue.js App'
+ )
+})
+
+test('process .vue with v-bind(css) in style block', () => {
+ mount(BindCss)
+
+ expect(document.querySelector('.testA').textContent).toBe('100px')
+ expect(document.querySelector('.testB').textContent).toBe('100px')
+ expect(document.querySelector('.testC').textContent).toBe('100px')
+})
diff --git a/e2e/3.x/00-win-path/tsconfig.base.json b/e2e/3.x/00-win-path/tsconfig.base.json
new file mode 100644
index 0000000..0b98e19
--- /dev/null
+++ b/e2e/3.x/00-win-path/tsconfig.base.json
@@ -0,0 +1,21 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "es6"],
+ "module": "es2015",
+ "moduleResolution": "node",
+ "types": ["vue-typescript-import-dts", "node"],
+ "isolatedModules": false,
+ "experimentalDecorators": true,
+ "noImplicitAny": true,
+ "noImplicitThis": true,
+ "strictNullChecks": true,
+ "removeComments": true,
+ "emitDecoratorMetadata": true,
+ "suppressImplicitAnyIndexErrors": true,
+ "allowSyntheticDefaultImports": true,
+ "sourceMap": true,
+ "esModuleInterop": true,
+ "allowJs": true
+ }
+}
diff --git a/e2e/3.x/00-win-path/tsconfig.json b/e2e/3.x/00-win-path/tsconfig.json
new file mode 100644
index 0000000..ffcbb94
--- /dev/null
+++ b/e2e/3.x/00-win-path/tsconfig.json
@@ -0,0 +1,3 @@
+{
+ "extends": "./tsconfig.base.json"
+}
diff --git a/e2e/3.x/00-win-path/v-test-directive.js b/e2e/3.x/00-win-path/v-test-directive.js
new file mode 100644
index 0000000..27bfba4
--- /dev/null
+++ b/e2e/3.x/00-win-path/v-test-directive.js
@@ -0,0 +1,3 @@
+module.exports = (dir, node, ...args) => {
+ return { needRuntime: false, props: [] }
+}
diff --git a/package.json b/package.json
index bdcea21..b7a755b 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "vue-jest-monorepo",
"private": true,
"engines": {
- "node": ">=10",
+ "node": ">=18",
"yarn": "^1.17.3"
},
"workspaces": {
@@ -34,9 +34,9 @@
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.1.0",
- "nanoid": "3.3.3",
"husky": "^1.1.4",
"lint-staged": "^8.0.5",
+ "nanoid": "3.3.3",
"postcss": "8.4.12",
"prettier": "^1.16.1"
},
diff --git a/packages/vue2-jest/lib/process-style.js b/packages/vue2-jest/lib/process-style.js
index 049e0c6..3e476eb 100644
--- a/packages/vue2-jest/lib/process-style.js
+++ b/packages/vue2-jest/lib/process-style.js
@@ -12,7 +12,10 @@ function getGlobalResources(resources, lang) {
if (resources && resources[lang]) {
globalResources = resources[lang]
.map(resource => {
- const absolutePath = path.resolve(process.cwd(), resource)
+ // need replace \ to / in windows
+ const absolutePath = path
+ .resolve(process.cwd(), resource)
+ .replaceAll('\\', '/')
return `${getImportLine(lang, absolutePath)}\n`
})
.join('')
diff --git a/packages/vue3-jest/lib/process-style.js b/packages/vue3-jest/lib/process-style.js
index 93adb48..b3ac51e 100644
--- a/packages/vue3-jest/lib/process-style.js
+++ b/packages/vue3-jest/lib/process-style.js
@@ -3,6 +3,7 @@ const path = require('path')
const cssTree = require('css-tree')
const getVueJestConfig = require('./utils').getVueJestConfig
const applyModuleNameMapper = require('./module-name-mapper-helper')
+const { generateFileId } = require('./utils')
const getCustomTransformer = require('./utils').getCustomTransformer
const logResultErrors = require('./utils').logResultErrors
const loadSrc = require('./utils').loadSrc
@@ -12,7 +13,10 @@ function getGlobalResources(resources, lang) {
if (resources && resources[lang]) {
globalResources = resources[lang]
.map(resource => {
- const absolutePath = path.resolve(process.cwd(), resource)
+ // need replace \ to / in windows
+ const absolutePath = path
+ .resolve(process.cwd(), resource)
+ .replaceAll('\\', '/')
return `${getImportLine(lang, absolutePath)}\n`
})
.join('')
@@ -111,7 +115,7 @@ module.exports = function processStyle(stylePart, filePath, config = {}) {
config.config
)
const result = compileStyle({
- id: `vue-jest-${filePath}`,
+ id: `vue-jest-${generateFileId(filePath)}`,
source: content,
filePath,
preprocessLang: stylePart.lang,
diff --git a/packages/vue3-jest/lib/process.js b/packages/vue3-jest/lib/process.js
index 6e4dbdb..f665361 100644
--- a/packages/vue3-jest/lib/process.js
+++ b/packages/vue3-jest/lib/process.js
@@ -14,6 +14,7 @@ const getCustomTransformer = require('./utils').getCustomTransformer
const loadSrc = require('./utils').loadSrc
const generateCode = require('./generate-code')
const mapLines = require('./map-lines')
+const { generateFileId } = require('./utils')
const vueComponentNamespace = require('./constants').vueComponentNamespace
function resolveTransformer(lang = 'js', vueJestConfig) {
@@ -54,7 +55,7 @@ function processScriptSetup(descriptor, filePath, config) {
}
const vueJestConfig = getVueJestConfig(config)
const content = compileScript(descriptor, {
- id: filePath,
+ id: generateFileId(filePath),
refTransform: true,
...vueJestConfig.compilerOptions
})
@@ -92,7 +93,7 @@ function processTemplate(descriptor, filename, config) {
let bindings
if (scriptSetup) {
const scriptSetupResult = compileScript(descriptor, {
- id: filename,
+ id: generateFileId(filename),
refTransform: true,
...vueJestConfig.compilerOptions
})
@@ -109,7 +110,7 @@ function processTemplate(descriptor, filename, config) {
const isTS = /^typescript$|tsx?$/.test(lang)
const result = compileTemplate({
- id: filename,
+ id: generateFileId(filename),
source: template.content,
filename,
preprocessLang: template.lang,
diff --git a/packages/vue3-jest/lib/utils.js b/packages/vue3-jest/lib/utils.js
index 5b1e70e..506b6a0 100644
--- a/packages/vue3-jest/lib/utils.js
+++ b/packages/vue3-jest/lib/utils.js
@@ -193,6 +193,17 @@ const loadSrc = (src, filePath) => {
}
}
+/**
+ * Replace windows path \ to ~ , and for consistency, also replace linux / to ~ .
+ *
+ * Fix issue:
+ * https://github.com/vuejs/vue-jest/issues/544
+ * https://github.com/vuejs/vue-jest/issues/549
+ */
+const generateFileId = filePath => {
+ return filePath.replace(/[\\/]/g, '~')
+}
+
module.exports = {
stripInlineSourceMap,
throwError,
@@ -206,5 +217,6 @@ module.exports = {
warn,
resolvePath,
fetchTransformer,
- loadSrc
+ loadSrc,
+ generateFileId
}