From 0b7fee5e0d68804167985036f70653e5a9b3f4ae Mon Sep 17 00:00:00 2001 From: Adam Hines Date: Mon, 13 Jun 2022 21:25:10 +0000 Subject: [PATCH 1/3] fix(sass-imports): resolve module imports relative to file being processed Currently sass-imports that use the module import syntax (eg. `~module-to-import/some.sass`) are resolved relative to the vue-jest package. If you only have one version of that package, and everything has been hoisted to the same level as vue-jest (or higher), then things work as expected. Where things start to fail is when you have more than one instance of the sass package you are trying to import as it is possible the wrong version will be loaded, and it is concievable that the file won't be found. Where I encountered this problem, we had something like the following: ``` node_modules/ component-library/ node_modules/ sass-library@3.0.0 mixins.sass some-component.vue: sass-library@1.0.0 mixins.sass @vue/vue2-jest lib module-name-mapper-helper.js ``` Notice that "sass-library" v1 was hoisted to the top level, but "component-library" depends on v3 of sass-library so v3 is in a nested node_modules directory. When "@vue/vue2-jest" does `require.resolve('sass-library/mixins.scss')`, while processing `component-library/some-component.vue`, the module search path is relative to the vue2-jest source file and not relative to some-component.vue like you would expect. The end result is that it finds the top-level `sass-library@1.0.0` and not the v3 version. To fix this, I am now passing in the optional "paths" value to require.resolve (available since node 8.9 https://nodejs.org/api/modules.html#requireresolverequest-options) and providing the path to the source file being processed instead. This will start the module resolution search at some-component.vue and the nested `node_modules/sass-library`` v3 will be found instead. --- packages/vue2-jest/lib/module-name-mapper-helper.js | 2 +- packages/vue3-jest/lib/module-name-mapper-helper.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/vue2-jest/lib/module-name-mapper-helper.js b/packages/vue2-jest/lib/module-name-mapper-helper.js index eaaba904..994d0421 100644 --- a/packages/vue2-jest/lib/module-name-mapper-helper.js +++ b/packages/vue2-jest/lib/module-name-mapper-helper.js @@ -31,7 +31,7 @@ function resolveSass(to, importPath, fileType) { for (const filename of filenames) { try { - return require.resolve(path.join(dirname, filename)) + return require.resolve(path.join(dirname, filename), { paths: [to] }) } catch (_) {} } } diff --git a/packages/vue3-jest/lib/module-name-mapper-helper.js b/packages/vue3-jest/lib/module-name-mapper-helper.js index 85ed1c23..8bad03a3 100644 --- a/packages/vue3-jest/lib/module-name-mapper-helper.js +++ b/packages/vue3-jest/lib/module-name-mapper-helper.js @@ -14,7 +14,9 @@ function resolve(to, importPath, fileType) { if (path.isAbsolute(importPath)) { return importPath } else if (matchModuleImport.test(importPath)) { - return require.resolve(importPath.replace(matchModuleImport, '')) + return require.resolve(importPath.replace(matchModuleImport, ''), { + paths: [to] + }) } return path.join(path.dirname(to), importPath) } From c5d1a699bdd9ceb3e4126a8fa1ea4ca3c9b1022a Mon Sep 17 00:00:00 2001 From: Adam Hines Date: Fri, 24 Jun 2022 21:34:19 +0000 Subject: [PATCH 2/3] test(vue2): adding e2e tests for sass-importer --- .../sass-importer/entry/babel-transformer.js | 4 ++ .../sass-importer/entry/components/Entry.vue | 24 +++++++++ e2e/2.x/sass-importer/entry/package.json | 49 +++++++++++++++++++ e2e/2.x/sass-importer/entry/test.js | 7 +++ e2e/2.x/sass-importer/lib/index.vue | 11 +++++ e2e/2.x/sass-importer/lib/package.json | 19 +++++++ e2e/2.x/sass-importer/sass-lib-v1/index.scss | 3 ++ .../sass-importer/sass-lib-v1/package.json | 12 +++++ e2e/2.x/sass-importer/sass-lib-v2/index.scss | 3 ++ .../sass-importer/sass-lib-v2/package.json | 12 +++++ package.json | 8 ++- yarn.lock | 11 +++++ 12 files changed, 161 insertions(+), 2 deletions(-) create mode 100644 e2e/2.x/sass-importer/entry/babel-transformer.js create mode 100644 e2e/2.x/sass-importer/entry/components/Entry.vue create mode 100644 e2e/2.x/sass-importer/entry/package.json create mode 100644 e2e/2.x/sass-importer/entry/test.js create mode 100644 e2e/2.x/sass-importer/lib/index.vue create mode 100644 e2e/2.x/sass-importer/lib/package.json create mode 100644 e2e/2.x/sass-importer/sass-lib-v1/index.scss create mode 100644 e2e/2.x/sass-importer/sass-lib-v1/package.json create mode 100644 e2e/2.x/sass-importer/sass-lib-v2/index.scss create mode 100644 e2e/2.x/sass-importer/sass-lib-v2/package.json diff --git a/e2e/2.x/sass-importer/entry/babel-transformer.js b/e2e/2.x/sass-importer/entry/babel-transformer.js new file mode 100644 index 00000000..193503e5 --- /dev/null +++ b/e2e/2.x/sass-importer/entry/babel-transformer.js @@ -0,0 +1,4 @@ +const { createTransformer } = require('babel-jest').default +module.exports = createTransformer({ + presets: ['@babel/preset-env'] +}) diff --git a/e2e/2.x/sass-importer/entry/components/Entry.vue b/e2e/2.x/sass-importer/entry/components/Entry.vue new file mode 100644 index 00000000..63adb0ce --- /dev/null +++ b/e2e/2.x/sass-importer/entry/components/Entry.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/e2e/2.x/sass-importer/entry/package.json b/e2e/2.x/sass-importer/entry/package.json new file mode 100644 index 00000000..fae72c75 --- /dev/null +++ b/e2e/2.x/sass-importer/entry/package.json @@ -0,0 +1,49 @@ +{ + "name": "vue2-sass-importer-entry", + "version": "1.0.0", + "license": "MIT", + "private": true, + "scripts": { + "test": "jest --no-cache --coverage test.js" + }, + "dependencies": { + "vue": "^2.5.21", + "vue-template-compiler": "^2.5.21", + "vue2-sass-importer-lib": "file:../lib", + "vue2-sass-importer-sass-lib": "file:../sass-lib-v2" + }, + "devDependencies": { + "@babel/core": "^7.9.0", + "@babel/preset-env": "^7.9.0", + "@vue/test-utils": "^1.1.0", + "babel-jest": "^28.0.2", + "jest": "28.x", + "jest-environment-jsdom": "28.0.2", + "postcss": "^7.0.13", + "postcss-color-function": "^4.0.1", + "sass": "^1.23.7", + "@vue/vue2-jest": "^28.0.0" + }, + "jest": { + "testEnvironment": "jsdom", + "moduleFileExtensions": [ + "js", + "json", + "vue" + ], + "transformIgnorePatterns": [ + "/node_modules/.*(? { + const wrapper = mount(Entry) + expect(wrapper).toBeDefined() +}) diff --git a/e2e/2.x/sass-importer/lib/index.vue b/e2e/2.x/sass-importer/lib/index.vue new file mode 100644 index 00000000..50d3742c --- /dev/null +++ b/e2e/2.x/sass-importer/lib/index.vue @@ -0,0 +1,11 @@ + + + diff --git a/e2e/2.x/sass-importer/lib/package.json b/e2e/2.x/sass-importer/lib/package.json new file mode 100644 index 00000000..330adfab --- /dev/null +++ b/e2e/2.x/sass-importer/lib/package.json @@ -0,0 +1,19 @@ +{ + "name": "vue2-sass-importer-lib", + "version": "1.0.0", + "license": "MIT", + "private": true, + "main": "index.vue", + "files": [ + "index.vue" + ], + "scripts": { + "test": "echo 'No tests found.'" + }, + "dependencies": { + "vue2-sass-importer-sass-lib": "file:../sass-lib-v1" + }, + "peerDependencies": { + "vue": "^2.5.21" + } +} diff --git a/e2e/2.x/sass-importer/sass-lib-v1/index.scss b/e2e/2.x/sass-importer/sass-lib-v1/index.scss new file mode 100644 index 00000000..05795e0f --- /dev/null +++ b/e2e/2.x/sass-importer/sass-lib-v1/index.scss @@ -0,0 +1,3 @@ +@mixin my-v1-mixin { + color: blue; +} diff --git a/e2e/2.x/sass-importer/sass-lib-v1/package.json b/e2e/2.x/sass-importer/sass-lib-v1/package.json new file mode 100644 index 00000000..cc5fc32c --- /dev/null +++ b/e2e/2.x/sass-importer/sass-lib-v1/package.json @@ -0,0 +1,12 @@ +{ + "name": "vue2-sass-importer-sass-lib", + "version": "1.0.0", + "license": "MIT", + "private": true, + "files": [ + "index.scss" + ], + "scripts": { + "test": "echo 'No tests found.'" + } +} diff --git a/e2e/2.x/sass-importer/sass-lib-v2/index.scss b/e2e/2.x/sass-importer/sass-lib-v2/index.scss new file mode 100644 index 00000000..8f5e144d --- /dev/null +++ b/e2e/2.x/sass-importer/sass-lib-v2/index.scss @@ -0,0 +1,3 @@ +@mixin my-v2-mixin { + color: red; +} diff --git a/e2e/2.x/sass-importer/sass-lib-v2/package.json b/e2e/2.x/sass-importer/sass-lib-v2/package.json new file mode 100644 index 00000000..b9b40960 --- /dev/null +++ b/e2e/2.x/sass-importer/sass-lib-v2/package.json @@ -0,0 +1,12 @@ +{ + "name": "vue2-sass-importer-sass-lib", + "version": "2.0.0", + "license": "MIT", + "private": true, + "files": [ + "index.scss" + ], + "scripts": { + "test": "echo 'No tests found.'" + } +} diff --git a/package.json b/package.json index 9a6e0e26..6522ba8f 100644 --- a/package.json +++ b/package.json @@ -8,10 +8,14 @@ "workspaces": { "packages": [ "packages/*", - "e2e/**" + "e2e/2.x/*", + "e2e/2.x/**/entry", + "e2e/3.x/*", + "e2e/3.x/**/entry" ], "nohoist": [ - "**/vue" + "**/vue", + "**/vue2-sass-importer-sass-lib" ] }, "scripts": { diff --git a/yarn.lock b/yarn.lock index 9200e3c1..5daacf36 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10865,6 +10865,17 @@ vue-template-es2015-compiler@^1.9.0: resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825" integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw== +"vue2-sass-importer-lib@file:e2e/2.x/sass-importer/lib": + version "1.0.0" + dependencies: + vue2-sass-importer-sass-lib "file:../../.cache/yarn/v6/npm-vue2-sass-importer-lib-1.0.0-c953c300-a005-492f-9652-a1024a3a28b9-1656106782763/node_modules/sass-lib-v1" + +"vue2-sass-importer-sass-lib@file:e2e/2.x/sass-importer/sass-lib-v1": + version "1.0.0" + +"vue2-sass-importer-sass-lib@file:e2e/2.x/sass-importer/sass-lib-v2": + version "2.0.0" + vue@^2.4.2, vue@^2.5.21: version "2.6.14" resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235" From a7d68515e047ceae62037b88378fb103933a5db1 Mon Sep 17 00:00:00 2001 From: Adam Hines Date: Fri, 24 Jun 2022 21:39:13 +0000 Subject: [PATCH 3/3] test(vue3): adding e2e tests for sass-importer --- .../sass-importer/entry/babel-transformer.js | 4 ++ .../sass-importer/entry/components/Entry.vue | 24 ++++++++++ e2e/3.x/sass-importer/entry/package.json | 48 +++++++++++++++++++ e2e/3.x/sass-importer/entry/test.js | 7 +++ e2e/3.x/sass-importer/lib/index.vue | 11 +++++ e2e/3.x/sass-importer/lib/package.json | 19 ++++++++ e2e/3.x/sass-importer/sass-lib-v1/index.scss | 3 ++ .../sass-importer/sass-lib-v1/package.json | 12 +++++ e2e/3.x/sass-importer/sass-lib-v2/index.scss | 3 ++ .../sass-importer/sass-lib-v2/package.json | 12 +++++ yarn.lock | 13 ++++- 11 files changed, 155 insertions(+), 1 deletion(-) create mode 100644 e2e/3.x/sass-importer/entry/babel-transformer.js create mode 100644 e2e/3.x/sass-importer/entry/components/Entry.vue create mode 100644 e2e/3.x/sass-importer/entry/package.json create mode 100644 e2e/3.x/sass-importer/entry/test.js create mode 100644 e2e/3.x/sass-importer/lib/index.vue create mode 100644 e2e/3.x/sass-importer/lib/package.json create mode 100644 e2e/3.x/sass-importer/sass-lib-v1/index.scss create mode 100644 e2e/3.x/sass-importer/sass-lib-v1/package.json create mode 100644 e2e/3.x/sass-importer/sass-lib-v2/index.scss create mode 100644 e2e/3.x/sass-importer/sass-lib-v2/package.json diff --git a/e2e/3.x/sass-importer/entry/babel-transformer.js b/e2e/3.x/sass-importer/entry/babel-transformer.js new file mode 100644 index 00000000..193503e5 --- /dev/null +++ b/e2e/3.x/sass-importer/entry/babel-transformer.js @@ -0,0 +1,4 @@ +const { createTransformer } = require('babel-jest').default +module.exports = createTransformer({ + presets: ['@babel/preset-env'] +}) diff --git a/e2e/3.x/sass-importer/entry/components/Entry.vue b/e2e/3.x/sass-importer/entry/components/Entry.vue new file mode 100644 index 00000000..367e3f6b --- /dev/null +++ b/e2e/3.x/sass-importer/entry/components/Entry.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/e2e/3.x/sass-importer/entry/package.json b/e2e/3.x/sass-importer/entry/package.json new file mode 100644 index 00000000..d81dc43d --- /dev/null +++ b/e2e/3.x/sass-importer/entry/package.json @@ -0,0 +1,48 @@ +{ + "name": "vue3-sass-importer-entry", + "version": "1.0.0", + "license": "MIT", + "private": true, + "scripts": { + "test": "jest --no-cache --coverage test.js" + }, + "dependencies": { + "vue": "^3.2.22", + "vue3-sass-importer-lib": "file:../lib", + "vue3-sass-importer-sass-lib": "file:../sass-lib-v2" + }, + "devDependencies": { + "@babel/core": "^7.9.0", + "@babel/preset-env": "^7.9.0", + "@vue/test-utils": "^2.0.0-rc.10", + "babel-jest": "^28.0.2", + "jest": "28.x", + "jest-environment-jsdom": "28.0.2", + "postcss": "^7.0.13", + "postcss-color-function": "^4.0.1", + "sass": "^1.23.7", + "@vue/vue3-jest": "^28.0.0" + }, + "jest": { + "testEnvironment": "jsdom", + "moduleFileExtensions": [ + "js", + "json", + "vue" + ], + "transformIgnorePatterns": [ + "/node_modules/.*(? { + const wrapper = mount(Entry) + expect(wrapper).toBeDefined() +}) diff --git a/e2e/3.x/sass-importer/lib/index.vue b/e2e/3.x/sass-importer/lib/index.vue new file mode 100644 index 00000000..fc3c0231 --- /dev/null +++ b/e2e/3.x/sass-importer/lib/index.vue @@ -0,0 +1,11 @@ + + + diff --git a/e2e/3.x/sass-importer/lib/package.json b/e2e/3.x/sass-importer/lib/package.json new file mode 100644 index 00000000..6f19b178 --- /dev/null +++ b/e2e/3.x/sass-importer/lib/package.json @@ -0,0 +1,19 @@ +{ + "name": "vue3-sass-importer-lib", + "version": "1.0.0", + "license": "MIT", + "private": true, + "main": "index.vue", + "files": [ + "index.vue" + ], + "scripts": { + "test": "echo 'No tests found.'" + }, + "dependencies": { + "vue3-sass-importer-sass-lib": "file:../sass-lib-v1" + }, + "peerDependencies": { + "vue": "^3.2.22" + } +} diff --git a/e2e/3.x/sass-importer/sass-lib-v1/index.scss b/e2e/3.x/sass-importer/sass-lib-v1/index.scss new file mode 100644 index 00000000..05795e0f --- /dev/null +++ b/e2e/3.x/sass-importer/sass-lib-v1/index.scss @@ -0,0 +1,3 @@ +@mixin my-v1-mixin { + color: blue; +} diff --git a/e2e/3.x/sass-importer/sass-lib-v1/package.json b/e2e/3.x/sass-importer/sass-lib-v1/package.json new file mode 100644 index 00000000..5717428c --- /dev/null +++ b/e2e/3.x/sass-importer/sass-lib-v1/package.json @@ -0,0 +1,12 @@ +{ + "name": "vue3-sass-importer-sass-lib", + "version": "1.0.0", + "license": "MIT", + "private": true, + "files": [ + "index.scss" + ], + "scripts": { + "test": "echo 'No tests found.'" + } +} diff --git a/e2e/3.x/sass-importer/sass-lib-v2/index.scss b/e2e/3.x/sass-importer/sass-lib-v2/index.scss new file mode 100644 index 00000000..8f5e144d --- /dev/null +++ b/e2e/3.x/sass-importer/sass-lib-v2/index.scss @@ -0,0 +1,3 @@ +@mixin my-v2-mixin { + color: red; +} diff --git a/e2e/3.x/sass-importer/sass-lib-v2/package.json b/e2e/3.x/sass-importer/sass-lib-v2/package.json new file mode 100644 index 00000000..d06a853a --- /dev/null +++ b/e2e/3.x/sass-importer/sass-lib-v2/package.json @@ -0,0 +1,12 @@ +{ + "name": "vue3-sass-importer-sass-lib", + "version": "2.0.0", + "license": "MIT", + "private": true, + "files": [ + "index.scss" + ], + "scripts": { + "test": "echo 'No tests found.'" + } +} diff --git a/yarn.lock b/yarn.lock index 5daacf36..755a6220 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10868,7 +10868,7 @@ vue-template-es2015-compiler@^1.9.0: "vue2-sass-importer-lib@file:e2e/2.x/sass-importer/lib": version "1.0.0" dependencies: - vue2-sass-importer-sass-lib "file:../../.cache/yarn/v6/npm-vue2-sass-importer-lib-1.0.0-c953c300-a005-492f-9652-a1024a3a28b9-1656106782763/node_modules/sass-lib-v1" + vue2-sass-importer-sass-lib "file:../../.cache/yarn/v6/npm-vue2-sass-importer-lib-1.0.0-1087f856-8699-4ac6-a0fa-2288988256c2-1656107462461/node_modules/sass-lib-v1" "vue2-sass-importer-sass-lib@file:e2e/2.x/sass-importer/sass-lib-v1": version "1.0.0" @@ -10876,6 +10876,17 @@ vue-template-es2015-compiler@^1.9.0: "vue2-sass-importer-sass-lib@file:e2e/2.x/sass-importer/sass-lib-v2": version "2.0.0" +"vue3-sass-importer-lib@file:e2e/3.x/sass-importer/lib": + version "1.0.0" + dependencies: + vue3-sass-importer-sass-lib "file:../../.cache/yarn/v6/npm-vue3-sass-importer-lib-1.0.0-c866bb73-f527-47b9-932d-498dea4cf3d0-1656107462461/node_modules/sass-lib-v1" + +"vue3-sass-importer-sass-lib@file:e2e/3.x/sass-importer/sass-lib-v1": + version "1.0.0" + +"vue3-sass-importer-sass-lib@file:e2e/3.x/sass-importer/sass-lib-v2": + version "2.0.0" + vue@^2.4.2, vue@^2.5.21: version "2.6.14" resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"