fix: allow importing relative paths in global resources (#548)

Author: pmrotule

e2e/2.x/style/colors.less

@@ -0,0 +1 @@
+@primary-color: "red";

e2e/2.x/style/colors.scss

@@ -0,0 +1 @@
+$primary-color: #333;

e2e/2.x/style/variables.less

@@ -1 +1,3 @@
-@primary-color: "red";
+@import "./colors.less";
+
+@font-size: 16px;

e2e/2.x/style/variables.scss

@@ -1 +1,3 @@
-$primary-color: #333;
+@import './colors.scss';
+
+$font-size: 16px;

e2e/3.x/style/colors.less

@@ -0,0 +1 @@
+@primary-color: "red";

e2e/3.x/style/colors.scss

@@ -0,0 +1 @@
+$primary-color: #333;

e2e/3.x/style/variables.less

@@ -1 +1,3 @@
-@primary-color: "red";
+@import "./colors.less";
+
+@font-size: 16px;

e2e/3.x/style/variables.scss

@@ -1 +1,3 @@
-$primary-color: #333;
+@import './colors.scss';
+
+$font-size: 16px;

packages/vue2-jest/lib/process-style.js

@@ -1,5 +1,4 @@
 const path = require('path')
-const fs = require('fs')
 const cssTree = require('css-tree')
 const getVueJestConfig = require('./utils').getVueJestConfig
 const compileStyle = require('@vue/component-compiler-utils').compileStyle
@@ -12,14 +11,23 @@ function getGlobalResources(resources, lang) {
   let globalResources = ''
   if (resources && resources[lang]) {
     globalResources = resources[lang]
-      .map(resource => path.resolve(process.cwd(), resource))
-      .filter(resourcePath => fs.existsSync(resourcePath))
-      .map(resourcePath => fs.readFileSync(resourcePath).toString())
-      .join('\n')
+      .map(resource => {
+        const absolutePath = path.resolve(process.cwd(), resource)
+        return `${getImportLine(lang, absolutePath)}\n`
+      })
+      .join('')
   }
   return globalResources
 }
 
+function getImportLine(lang, filePath) {
+  const importLines = {
+    default: `@import "${filePath}";`,
+    sass: `@import "${filePath}"`
+  }
+  return importLines[lang] || importLines.default
+}
+
 function extractClassMap(cssCode) {
   const ast = cssTree.parse(cssCode)
 
@@ -35,6 +43,7 @@ function extractClassMap(cssCode) {
 function getPreprocessOptions(lang, filePath, jestConfig) {
   if (lang === 'scss' || lang === 'sass') {
     return {
+      filename: filePath,
       importer: (url, prev, done) => ({
         file: applyModuleNameMapper(
           url,

packages/vue3-jest/lib/process-style.js

@@ -1,6 +1,5 @@
 const { compileStyle } = require('@vue/compiler-sfc')
 const path = require('path')
-const fs = require('fs')
 const cssTree = require('css-tree')
 const getVueJestConfig = require('./utils').getVueJestConfig
 const applyModuleNameMapper = require('./module-name-mapper-helper')
@@ -12,14 +11,23 @@ function getGlobalResources(resources, lang) {
   let globalResources = ''
   if (resources && resources[lang]) {
     globalResources = resources[lang]
-      .map(resource => path.resolve(process.cwd(), resource))
-      .filter(resourcePath => fs.existsSync(resourcePath))
-      .map(resourcePath => fs.readFileSync(resourcePath).toString())
-      .join('\n')
+      .map(resource => {
+        const absolutePath = path.resolve(process.cwd(), resource)
+        return `${getImportLine(lang, absolutePath)}\n`
+      })
+      .join('')
   }
   return globalResources
 }
 
+function getImportLine(lang, filePath) {
+  const importLines = {
+    default: `@import "${filePath}";`,
+    sass: `@import "${filePath}"`
+  }
+  return importLines[lang] || importLines.default
+}
+
 function extractClassMap(cssCode) {
   const ast = cssTree.parse(cssCode)
 
@@ -35,6 +43,7 @@ function extractClassMap(cssCode) {
 function getPreprocessOptions(lang, filePath, jestConfig) {
   if (lang === 'scss' || lang === 'sass') {
     return {
+      filename: filePath,
       importer: (url, prev) => ({
         file: applyModuleNameMapper(
           url,