vuejs · ShuZhong · Jan 17, 2024
diff --git a/e2e/3.x/00-win-path/babel.config.js 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
@@ -0,0 +1,49 @@
+<template>
+  <div class="hello">
+    <h1 :class="headingClasses">
+      {{ msg }}
+    </h1>
+  </div>
+</template>
+
+<style module="css">
+.testA {
+  background-color: red;
+}
+</style>
+<style module>
+.testB {
+  background-color: blue;
+}
+</style>
+<style>
+.testC {
+  background-color: blue;
+}
+</style>
+
+<script>
+export default {
+  name: 'Basic',
+  data: function data() {
+    return {
+      msg: 'Welcome to Your Vue.js App',
+      isCrazy: false
+    }
+  },
+  computed: {
+    headingClasses: function headingClasses() {
+      return {
+        red: this.isCrazy,
+        blue: !this.isCrazy,
+        shadow: this.isCrazy
+      }
+    }
+  },
+  methods: {
+    toggleClass: function toggleClass() {
+      this.isCrazy = !this.isCrazy
+    }
+  }
+}
+</script>
diff --git a/e2e/3.x/00-win-path/components/BindCss.vue b/e2e/3.x/00-win-path/components/BindCss.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="testA">
+    {{ sizeA }}
+  </div>
+  <div class="testB">
+    {{ sizeB }}
+  </div>
+  <div class="testC">
+    {{ sizeC.val }}
+  </div>
+</template>
+
+<style scoped>
+.testA {
+  background-color: red;
+  width: v-bind('sizeA');
+  height: v-bind('sizeA');
+}
+</style>
+<style module>
+.testB {
+  background-color: blue;
+  width: v-bind('sizeB');
+  height: v-bind('sizeB');
+}
+</style>
+<style>
+.testC {
+  background-color: blue;
+  width: v-bind('sizeC.val');
+  height: v-bind('sizeC.val');
+}
+</style>
+
+<script setup>
+import { ref } from 'vue'
+
+const sizeA = ref('100px')
+const sizeB = '100px'
+const sizeC = {
+  val: '100px'
+}
+</script>
diff --git a/e2e/3.x/00-win-path/jest.config.js 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/(.*)$': '<rootDir>/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,3 @@
+module.exports = (dir, node, ...args) => {
+  return { needRuntime: false, props: [] }
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
 }