feat: improved support for SCSS and SASS (#82)

Author: jeremyzahner

README.md

@@ -4,18 +4,21 @@ Jest Vue transformer with source map support
 
 ## Usage
 
-```
+```bash
 npm install --save-dev vue-jest
 ```
 
 ## Setup
 
 To define vue-jest as a transformer for your .vue files, you need to map .vue files to the vue-jest module.
 
-```
-"transform": {
-  ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
-},
+```json
+{
+  "jest": {
+    "transform": {
+      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+    }
+}
 ```
 
 A full config will look like this.
@@ -47,7 +50,7 @@ Example repositories testing Vue components with jest and vue-jest:
 
 ## Supported langs
 
-vue-jest compiles the script and template of SFCs into a JavaScript file that Jest can run. **Currently, SCSS and Stylus are the only style languages that are compiled**.
+vue-jest compiles the script and template of SFCs into a JavaScript file that Jest can run. **Currently, SCSS, SASS and Stylus are the only style languages that are compiled**.
 
 ### Supported script languages
 
@@ -59,8 +62,8 @@ vue-jest compiles the script and template of SFCs into a JavaScript file that Je
 - **pug** (`lang="pug"`)
   - To give options for the Pug compiler, enter them into the Jest configuration.
   The options will be passed to pug.compile().
-  ```js
-    // package.json
+
+  ```json
     {
       "jest": {
         "globals": {
@@ -72,41 +75,44 @@ vue-jest compiles the script and template of SFCs into a JavaScript file that Je
         }
       }
     }
-  ``` 
+  ```
+
 - **jade** (`lang="jade"`)
 - **haml** (`lang="haml"`)
 
 ### 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.
 - **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.
   - To import globally included files (ie. variables, mixins, etc.), include them in the Jest configuration at `jest.globals['vue-jest'].resources.scss`:
-  ```js
-  // package.json
-  {
-    "jest": {
-      "globals": {
-        "vue-jest": {
-          "resources": {
-            "scss": [
-              "./node_modules/package/_mixins.scss",
-              "./src/assets/css/globals.scss"
-            ]
+
+    ```json
+    {
+      "jest": {
+        "globals": {
+          "vue-jest": {
+            "resources": {
+              "scss": [
+                "./node_modules/package/_mixins.scss",
+                "./src/assets/css/globals.scss"
+              ]
+            }
           }
         }
       }
     }
-  }
-  ```
+    ```
 
-  ## CSS options
+## CSS options
 
 `experimentalCSSCompile`: `Boolean` Default true. Turn off CSS compilation
 `hideStyleWarn`: `Boolean` Default false. Hide warnings about CSS compilation
 `resources`:
 
-```js
-  // package.json
+  ```json
   {
     "jest": {
       "globals": {

lib/compilers/helpers/local-resolve-helper.js

@@ -0,0 +1,16 @@
+const path = require('path')
+
+/**
+ * Resolves the path to the file locally.
+ *
+ * @param {String} to - the name of the file to resolve to
+ * @param {String} localPath - the local path
+ * @returns {String} path - path to the file to import
+ */
+module.exports = function localResolve (to, localPath) {
+  if (localPath.startsWith('/')) {
+    return localPath
+  }
+  return path.join(path.dirname(to), localPath)
+}
+

lib/compilers/helpers/module-name-mapper-helper.js

@@ -0,0 +1,36 @@
+const localResolve = require('./local-resolve-helper')
+
+/**
+ * Applies the moduleNameMapper substitution from the jest config
+ *
+ * @param {String} source - the original string
+ * @param {String} filePath - the path of the current file (where the source originates)
+ * @param {Object} jestConfig - the jestConfig holding the moduleNameMapper settings
+ * @returns {String} path - the final path to import (including replacements via moduleNameMapper)
+ */
+module.exports = function applyModuleNameMapper (source, filePath, jestConfig = {}) {
+  if (!jestConfig.moduleNameMapper) return source
+
+  // Extract the moduleNameMapper settings from the jest config. TODO: In case of development via babel@7, somehow the jestConfig.moduleNameMapper might end up being an Array. After a proper upgrade to babel@7 we should probably fix this.
+  const module = Array.isArray(jestConfig.moduleNameMapper) ? jestConfig.moduleNameMapper : Object.entries(jestConfig.moduleNameMapper)
+
+  const importPath = module
+    .reduce((acc, [regex, replacement]) => {
+      const matches = acc.match(regex)
+
+      if (matches === null) {
+        return acc
+      }
+
+      return replacement.replace(
+        /\$([0-9]+)/g,
+        (_, index) => matches[parseInt(index, 10)]
+      )
+    }, source)
+
+  return localResolve(
+    filePath,
+    importPath
+  )
+}
+

lib/compilers/sass-compiler.js

@@ -0,0 +1,36 @@
+const ensureRequire = require('../ensure-require')
+const getVueJestConfig = require('../get-vue-jest-config')
+const logger = require('../logger')
+
+const applyModuleNameMapper = require('./helpers/module-name-mapper-helper')
+
+/**
+ * This module is meant to compile sass
+ *
+ * @param {String} content - the content of the sass string that should be compiled
+ * @param {String} filePath - the path of the file holding the sass
+ * @param {Object} jestConfig - the complete jest config
+ * @returns {String} styles - the compiled sass
+ */
+module.exports = (content, filePath, jestConfig = {}) => {
+  const vueJestConfig = getVueJestConfig(jestConfig)
+
+  ensureRequire('sass', ['node-sass'])
+  const sass = require('node-sass')
+
+  try {
+    return sass.renderSync({
+      data: content,
+      outputStyle: 'compressed',
+      indentedSyntax: true,
+      importer: (url, prev, done) => ({ file: applyModuleNameMapper(url, prev === 'stdin' ? filePath : prev, jestConfig) })
+    }).css.toString()
+  } catch (err) {
+    if (!vueJestConfig.hideStyleWarn) {
+      logger.warn(`There was an error rendering the SASS in ${filePath}. SASS is fully supported by vue-jest. Still some features might throw errors. Webpack aliases are a common cause of errors. If you use Webpack aliases, please use jest's suggested way via moduleNameMapper which is supported.`)
+      logger.warn(`Error while compiling styles: ${err}`)
+    }
+  }
+
+  return ''
+}

lib/compilers/scss-compiler.js

@@ -1,39 +1,46 @@
 const path = require('path')
 const fs = require('fs')
 const ensureRequire = require('../ensure-require')
-const cwd = process.cwd()
+const getVueJestConfig = require('../get-vue-jest-config')
 const logger = require('../logger')
 
-const rewriteImports = (content, filePath) => content.replace(/@import\s+(?:'([^']+)'|"([^"]+)"|([^\s;]+))/g, (entire, single, double, unquoted) => {
-  const oldImportPath = single || double || unquoted
-  const absoluteImportPath = path.join(path.dirname(filePath), oldImportPath)
-  const lastCharacter = entire[entire.length - 1]
-  const quote = lastCharacter === "'" || lastCharacter === '"' ? lastCharacter : ''
-  const importPath = path.relative(cwd, absoluteImportPath)
-  return '@import ' + quote + importPath + quote
-})
+const applyModuleNameMapper = require('./helpers/module-name-mapper-helper')
+
+/**
+ * This module is meant to compile scss
+ *
+ * @param {String} content - the content of the scss string that should be compiled
+ * @param {String} filePath - the path of the file holding the scss
+ * @param {Object} jestConfig - the complete jest config
+ * @returns {String} styles - the compiled scss
+ */
+module.exports = (content, filePath, jestConfig = {}) => {
+  const vueJestConfig = getVueJestConfig(jestConfig)
 
-module.exports = (content, filePath, config) => {
   ensureRequire('scss', ['node-sass'])
   const sass = require('node-sass')
 
   let scssResources = ''
-  if (config && config.resources && config.resources.scss) {
-    scssResources = config.resources.scss
+  if (vueJestConfig.resources && vueJestConfig.resources.scss) {
+    scssResources = vueJestConfig.resources.scss
       .map(scssResource => path.resolve(process.cwd(), scssResource))
       .filter(scssResourcePath => fs.existsSync(scssResourcePath))
-      .map(scssResourcePath => rewriteImports(fs.readFileSync(scssResourcePath).toString(), scssResourcePath))
+      .map(scssResourcePath => fs.readFileSync(scssResourcePath).toString())
       .join('\n')
   }
-  let result
+
   try {
-    result = sass.renderSync({
-      data: scssResources + rewriteImports(content, filePath),
-      outputStyle: 'compressed'
+    return sass.renderSync({
+      data: scssResources + content,
+      outputStyle: 'compressed',
+      importer: (url, prev, done) => ({ file: applyModuleNameMapper(url, prev === 'stdin' ? filePath : prev, jestConfig) })
     }).css.toString()
   } catch (err) {
-    config.hideStyleWarn &&
-      logger.warn(`There was an error rendering the SCSS in ${filePath}. SCSS is not fully supported by vue-jest, so some features will throw errors. Webpack aliases are a common cause of errors.`)
+    if (!vueJestConfig.hideStyleWarn) {
+      logger.warn(`There was an error rendering the SCSS in ${filePath}. SCSS is fully supported by vue-jest. Still some features might throw errors. Webpack aliases are a common cause of errors. If you use Webpack aliases, please use jest's suggested way via moduleNameMapper which is supported.`)
+      logger.warn(`Error while compiling styles: ${err}`)
+    }
   }
-  return result || ''
+
+  return ''
 }

lib/compilers/stylus-compiler.js

@@ -1,7 +1,7 @@
 const stylus = require('stylus')
 const path = require('path')
 
-module.exports = (content, filePath, config) => stylus.render(
+module.exports = (content, filePath, jestConfig) => stylus.render(
   content, {
     paths: [path.dirname(filePath), process.cwd()]
   }

lib/get-vue-jest-config.js

@@ -0,0 +1,9 @@
+/**
+ * This module extracts vue-jest relevant parts of a jest config
+ *
+ * @param {Object} jestConfig - a complete jest config object
+ * @returns {Object} vueJestConfig - an object holding vue-jest specific configuration
+ */
+module.exports = function getVueJestConfig (jestConfig) {
+  return (jestConfig && jestConfig.globals && jestConfig.globals['vue-jest']) || {}
+}

lib/logger.js

@@ -2,7 +2,7 @@ module.exports.info = function info (msg) {
   console.info('\n[vue-jest]: ' + (msg) + '\n')
 }
 
-module.exports.warn = function info (msg) {
+module.exports.warn = function warn (msg) {
   console.warn('\n[vue-jest]: ' + (msg) + '\n')
 }
 

lib/process-style.js

@@ -1,10 +1,14 @@
+const getVueJestConfig = require('./get-vue-jest-config')
 const cssExtract = require('extract-from-css')
 
-module.exports = function processStyle (stylePart, filePath, config = {}) {
-  if (!stylePart || config.experimentalCSSCompile === false) {
+module.exports = function processStyle (stylePart, filePath, jestConfig = {}) {
+  const vueJestConfig = getVueJestConfig(jestConfig)
+
+  if (!stylePart || vueJestConfig.experimentalCSSCompile === false) {
     return {}
   }
-  const processStyleByLang = lang => require('./compilers/' + lang + '-compiler')(stylePart.content, filePath, config)
+
+  const processStyleByLang = lang => require('./compilers/' + lang + '-compiler')(stylePart.content, filePath, jestConfig)
 
   let cssCode = stylePart.content
   switch (stylePart.lang) {
@@ -15,6 +19,9 @@ module.exports = function processStyle (stylePart, filePath, config = {}) {
     case 'scss':
       cssCode = processStyleByLang('scss')
       break
+    case 'sass':
+      cssCode = processStyleByLang('sass')
+      break
   }
 
   const cssNames = cssExtract.extractClasses(cssCode)

lib/process.js

@@ -7,6 +7,7 @@ const compileTypescript = require('./compilers/typescript-compiler')
 const compileCoffeeScript = require('./compilers/coffee-compiler')
 const extractPropsFromFunctionalTemplate = require('./extract-props')
 const processStyle = require('./process-style')
+const getVueJestConfig = require('./get-vue-jest-config')
 const fs = require('fs')
 const path = require('path')
 const join = path.join
@@ -40,7 +41,7 @@ function changePartsIfFunctional (parts) {
 }
 
 module.exports = function (src, filePath, jestConfig) {
-  const config = (jestConfig && jestConfig.globals && jestConfig.globals['vue-jest']) || {}
+  const vueJestConfig = getVueJestConfig(jestConfig)
 
   var parts = vueCompiler.parseComponent(src, { pad: true })
 
@@ -74,7 +75,7 @@ module.exports = function (src, filePath, jestConfig) {
       parts.template.content = fs.readFileSync(parts.template.filename, 'utf8')
     }
 
-    const renderFunctions = compileTemplate(parts.template, config)
+    const renderFunctions = compileTemplate(parts.template, vueJestConfig)
 
     output += '__vue__options__.render = ' + renderFunctions.render + '\n' +
       '__vue__options__.staticRenderFns = ' + renderFunctions.staticRenderFns + '\n'
@@ -86,17 +87,17 @@ module.exports = function (src, filePath, jestConfig) {
   }
 
   if (Array.isArray(parts.styles) && parts.styles.length > 0) {
-    if ((parts.styles.some(ast => /^sass|less|pcss|postcss/.test(ast.lang))) && logger.shouldLogStyleWarn) {
-      !config.hideStyleWarn && logger.warn('Sass, Less and PostCSS are not currently compiled by vue-jest')
+    if ((parts.styles.some(ast => /^less|pcss|postcss/.test(ast.lang))) && logger.shouldLogStyleWarn) {
+      !vueJestConfig.hideStyleWarn && logger.warn('Less and PostCSS are not currently compiled by vue-jest')
       logger.shouldLogStyleWarn = false
     }
 
     const styleStr = parts.styles
-      .filter(ast => module && ast.module)
+      .filter(ast => ast.module)
       .map(ast => {
-        const styleObj = (/^sass|less|pcss|postcss/.test(ast.lang))
+        const styleObj = (/^less|pcss|postcss/.test(ast.lang))
           ? {}
-          : processStyle(ast, filePath, config)
+          : processStyle(ast, filePath, jestConfig)
 
         const moduleName = ast.module === true ? '$style' : ast.module
 

package.json

@@ -79,7 +79,11 @@
       "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
       ".*\\.(vue)$": "<rootDir>/vue-jest.js"
     },
-    "mapCoverage": true
+    "mapCoverage": true,
+    "moduleNameMapper": {
+      "^~?__root/(.*)$": "<rootDir>/$1",
+      "^~?__test/(.*)$": "<rootDir>/test/$1"
+    }
   },
   "repository": {
     "type": "git",

test/jade.spec.js

@@ -4,5 +4,5 @@ import Jade from './resources/Jade.vue'
 test('processes .vue file with jade template', () => {
   const wrapper = shallow(Jade)
   expect(wrapper.is('div')).toBe(true)
-  expect(wrapper.hasClass('jade')).toBe(true)
+  expect(wrapper.classes()).toContain('jade')
 })