From 6992166fcfbd1e761743d62f9dd0e8e74a407ab9 Mon Sep 17 00:00:00 2001 From: ShuZhong Date: Wed, 17 Jan 2024 11:20:05 +0800 Subject: [PATCH] fix: v-bind(css) + number prefix folder path + windows : make a syntax error --- e2e/3.x/00-win-path/babel.config.js | 3 ++ e2e/3.x/00-win-path/components/Basic.vue | 49 ++++++++++++++++++++++ e2e/3.x/00-win-path/components/BindCss.vue | 43 +++++++++++++++++++ e2e/3.x/00-win-path/jest.config.js | 23 ++++++++++ e2e/3.x/00-win-path/package.json | 21 ++++++++++ e2e/3.x/00-win-path/test.js | 34 +++++++++++++++ e2e/3.x/00-win-path/tsconfig.base.json | 21 ++++++++++ e2e/3.x/00-win-path/tsconfig.json | 3 ++ e2e/3.x/00-win-path/v-test-directive.js | 3 ++ package.json | 4 +- packages/vue2-jest/lib/process-style.js | 5 ++- packages/vue3-jest/lib/process-style.js | 8 +++- packages/vue3-jest/lib/process.js | 7 ++-- packages/vue3-jest/lib/utils.js | 14 ++++++- 14 files changed, 229 insertions(+), 9 deletions(-) create mode 100644 e2e/3.x/00-win-path/babel.config.js create mode 100644 e2e/3.x/00-win-path/components/Basic.vue create mode 100644 e2e/3.x/00-win-path/components/BindCss.vue create mode 100644 e2e/3.x/00-win-path/jest.config.js create mode 100644 e2e/3.x/00-win-path/package.json create mode 100644 e2e/3.x/00-win-path/test.js create mode 100644 e2e/3.x/00-win-path/tsconfig.base.json create mode 100644 e2e/3.x/00-win-path/tsconfig.json create mode 100644 e2e/3.x/00-win-path/v-test-directive.js 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 00000000..7db9b6f5 --- /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 00000000..8592d744 --- /dev/null +++ b/e2e/3.x/00-win-path/components/Basic.vue @@ -0,0 +1,49 @@ + + + + + + + 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 00000000..503d746c --- /dev/null +++ b/e2e/3.x/00-win-path/components/BindCss.vue @@ -0,0 +1,43 @@ + + + + + + + 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 00000000..fcb5e657 --- /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 00000000..389122d8 --- /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 00000000..69a4838a --- /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 00000000..0b98e194 --- /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 00000000..ffcbb947 --- /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 00000000..27bfba4a --- /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 bdcea211..b7a755b0 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 049e0c6b..3e476eb9 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 93adb48a..b3ac51e7 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 6e4dbdb0..f6653617 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 5b1e70ee..506b6a0a 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 }