From aeb09830bc8f2b41700273bb2f6e831a7075c927 Mon Sep 17 00:00:00 2001
From: Victor van Poppelen <vvanpo@gmail.com>
Date: Mon, 27 Jul 2020 20:38:37 -0700
Subject: [PATCH] fix: bare Sass imports to files with fake extensions

If a Sass file attempted to import something like `~module/foo.bar`, our
custom resolver would expect `.bar` to be the filetype and would forego
appending `.scss` or `.sass`, causing `require.resolve()` to throw an
exception. We can be explicit about the filetype by successively testing
against `.scss`, `.sass` (depending on configured language in the
<style>-bock), and `.css`.

Add `.css` support for bare imports, and `.sass` imports from within
`.scss` or vice-versa.
---
 README.md                                  | 18 ++++++++--
 e2e/__projects__/style/components/Scss.vue |  8 ++++-
 e2e/__projects__/style/package.json        |  1 +
 e2e/__projects__/style/setup.js            |  4 +++
 lib/module-name-mapper-helper.js           | 40 ++++++++++++++--------
 5 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 3b7d23b1..164d041e 100644
--- a/README.md
+++ b/README.md
@@ -298,11 +298,23 @@ If a string is provided, it will be an assumed path to a TypeScript configuratio
 ### Supported style languages
 
 - **stylus** (`lang="stylus"`, `lang="styl"`)
-- **sass** (`lang="sass"`)
-  - The SASS compiler supports jest's [moduleNameMapper](https://facebook.github.io/jest/docs/en/configuration.html#modulenamemapper-object-string-string) which is the suggested way of dealing with Webpack aliases.
+- **sass** (`lang="sass"`), and
 - **scss** (`lang="scss"`)
 
-  - The SCSS compiler supports jest's [moduleNameMapper](https://facebook.github.io/jest/docs/en/configuration.html#modulenamemapper-object-string-string) which is the suggested way of dealing with Webpack aliases.
+  - The Sass compiler supports Jest's [moduleNameMapper](https://facebook.github.io/jest/docs/en/configuration.html#modulenamemapper-object-string-string) which is the suggested way of dealing with Webpack aliases. Webpack's `sass-loader` uses a [special syntax](https://github.com/webpack-contrib/sass-loader/blob/v9.0.2/README.md#resolving-import-at-rules) for indicating non-relative imports, so you'll likely need to copy this syntax into your `moduleNameMapper` entries if you make use of it. For aliases of bare imports (imports that require node module resolution), the aliased value must also be prepended with this `~` or `vue-jest`'s custom resolver won't recognize it.
+    ```json
+    {
+      "jest": {
+        "moduleNameMapper": {
+          "^~foo/(.*)": "<rootDir>/foo/$1",
+          // @import '~foo'; -> @import 'path/to/project/foo';
+          "^~bar/(.*)": "~baz/lib/$1"
+          // @import '~bar/qux'; -> @import 'path/to/project/node_modules/baz/lib/qux';
+          // Notice how the tilde (~) was needed on the bare import to baz.
+        }
+      }
+    }
+    ```
   - To import globally included files (ie. variables, mixins, etc.), include them in the Jest configuration at `jest.globals['vue-jest'].resources.scss`:
 
     ```json
diff --git a/e2e/__projects__/style/components/Scss.vue b/e2e/__projects__/style/components/Scss.vue
index 009d05d6..36e2b582 100644
--- a/e2e/__projects__/style/components/Scss.vue
+++ b/e2e/__projects__/style/components/Scss.vue
@@ -4,7 +4,13 @@
 
 <style lang="scss" module>
 @import '~__styles/scss-a';
-@import '~vue-jest-test/partial.scss';
+// Import absolute URL via moduleNameMapper.
+@import '~tmp/absolute';
+// Import _partial from within node_modules.
+@import '~vue-jest-test/partial';
+@import '~vue-jest-test/foo.bar'; // Import false extension.
+@import '~vue-jest-test/baz'; // Import .css from within .scss.
+@import '~vue-jest-test/qux'; // Import .sass from within .scss.
 
 .c {
   background-color: $primary-color;
diff --git a/e2e/__projects__/style/package.json b/e2e/__projects__/style/package.json
index 1c8c9a81..256372fd 100644
--- a/e2e/__projects__/style/package.json
+++ b/e2e/__projects__/style/package.json
@@ -30,6 +30,7 @@
       "^.+\\.vue$": "vue-jest"
     },
     "moduleNameMapper": {
+      "^~tmp/(.*)": "/tmp/$1",
       "^~?__styles/(.*)$": "<rootDir>/components/styles/$1"
     },
     "globals": {
diff --git a/e2e/__projects__/style/setup.js b/e2e/__projects__/style/setup.js
index 27efb86b..79679d2d 100644
--- a/e2e/__projects__/style/setup.js
+++ b/e2e/__projects__/style/setup.js
@@ -6,4 +6,8 @@ if (!fs.existsSync(testDir)) {
   fs.mkdirSync(testDir)
 }
 
+fs.openSync('/tmp/absolute.scss', 'w')
 fs.openSync(`${testDir}/_partial.scss`, 'w')
+fs.openSync(`${testDir}/foo.bar.scss`, 'w')
+fs.openSync(`${testDir}/baz.css`, 'w')
+fs.openSync(`${testDir}/qux.sass`, 'w')
diff --git a/lib/module-name-mapper-helper.js b/lib/module-name-mapper-helper.js
index 2d5e1f1e..eaaba904 100644
--- a/lib/module-name-mapper-helper.js
+++ b/lib/module-name-mapper-helper.js
@@ -1,16 +1,15 @@
 const path = require('path')
-const matchModuleImport = /^[^?]*~/
+
 /**
- * Resolves the path to the file/module.
+ * Resolve a Sass @import or @use rule.
  *
- * @param {String} to - the name of the file to resolve to
- * @param {String} importPath - the local path
- * @param {String} fileType - extension of the file to be resolved
- * @returns {String} path - path to the file to import
+ * @param {String} to - The path to the current file
+ * @param {String} importPath - The path to resolve
+ * @param {String} fileType - The filetype of the current file
  */
-function resolve(to, importPath, fileType) {
-  importPath =
-    path.extname(importPath) === '' ? `${importPath}.${fileType}` : importPath
+function resolveSass(to, importPath, fileType) {
+  // Mimic Sass-loader's `~` syntax for bare imports.
+  const matchModuleImport = /^~/
 
   if (path.isAbsolute(importPath)) {
     return importPath
@@ -18,12 +17,25 @@ function resolve(to, importPath, fileType) {
     const dirname = path.dirname(importPath).replace(matchModuleImport, '')
     const basename = path.basename(importPath)
 
-    try {
-      return require.resolve(path.join(dirname, basename))
-    } catch (_) {
-      return require.resolve(path.join(dirname, `_${basename}`))
+    const filenames = []
+
+    if (!/\.(sc|sa|c)ss/.test(basename)) {
+      const extensions = ['scss', 'sass', 'css'].filter(e => e !== fileType)
+      extensions.unshift(fileType)
+      extensions.forEach(ext => {
+        filenames.push(`${basename}.${ext}`, `_${basename}.${ext}`)
+      })
+    } else {
+      filenames.push(basename, `_${basename}`)
+    }
+
+    for (const filename of filenames) {
+      try {
+        return require.resolve(path.join(dirname, filename))
+      } catch (_) {}
     }
   }
+
   return path.join(path.dirname(to), importPath)
 }
 
@@ -61,5 +73,5 @@ module.exports = function applyModuleNameMapper(
     )
   }, source)
 
-  return resolve(filePath, importPath, fileType)
+  return resolveSass(filePath, importPath, fileType)
 }