fix(sass-imports): resolve module imports relative to file being processed (#478)

* 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/
            [email protected]
                mixins.sass
        some-component.vue:
            <style lang="sass">
              @import '~sass-library/mixins.scss';
              class foo {
                @use someMixinFromV3
              }
            </style>
    [email protected]
        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 `[email protected]` 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.

* test(vue2): adding e2e tests for sass-importer

* test(vue3): adding e2e tests for sass-importer

Co-authored-by: Adam Hines <[email protected]>

Author: thebanjomatic

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']
+})

e2e/2.x/sass-importer/entry/components/Entry.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h1 class="entry">Entry</h1>
+    <lib-component />
+  </div>
+</template>
+
+<script>
+import LibComponent from 'vue2-sass-importer-lib/index.vue'
+
+export default {
+  components: {
+    LibComponent
+  }
+}
+</script>
+
+<style lang="scss" module>
+@import '~vue2-sass-importer-sass-lib/index.scss';
+
+.entry {
+  @include my-v2-mixin;
+}
+</style>

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/.*(?<!.vue)$"
+    ],
+    "transform": {
+      "^.+\\.js$": "./babel-transformer.js",
+      "^.+\\.vue$": "@vue/vue2-jest"
+    },
+    "globals": {
+      "vue-jest": {
+        "transform": {
+          "^js$": "./babel-transformer.js"
+        }
+      }
+    }
+  }
+}

e2e/2.x/sass-importer/entry/test.js

@@ -0,0 +1,7 @@
+import { mount } from '@vue/test-utils'
+import Entry from './components/Entry.vue'
+
+test('processes sass imports relative to current file', () => {
+  const wrapper = mount(Entry)
+  expect(wrapper).toBeDefined()
+})

e2e/2.x/sass-importer/lib/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="lib-class">Lib Component</div>
+</template>
+
+<style lang="scss" module>
+@import '~vue2-sass-importer-sass-lib/index.scss';
+
+.lib-class {
+  @include my-v1-mixin;
+}
+</style>

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"
+  }
+}

e2e/2.x/sass-importer/sass-lib-v1/index.scss

@@ -0,0 +1,3 @@
+@mixin my-v1-mixin {
+  color: blue;
+}

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.'"
+  }
+}

e2e/2.x/sass-importer/sass-lib-v2/index.scss

@@ -0,0 +1,3 @@
+@mixin my-v2-mixin {
+  color: red;
+}

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.'"
+  }
+}