routablehq / jest-scss-transform

A jest transformer for SCSS file exports

jest-scss-transform

Jest transformer for .scss files.

Useful for when you're sharing variables between Sass and JavaScript, and makes your snapshots much nicer.

Install

npm i -D jest-scss-transform

or

yarn add -D jest-scss-transform

Add to your Jest config

Using jest.config.js:

module.exports = {
  // A map from regular expressions to paths to transformers
  transform: {
    "^.+\\.scss$": 'jest-scss-transform',
  },
};

Similarly, using "jest" key in package.json (create-react-app, etc):

{
  "jest": {
    "transform": {
      "^.+\\.scss$": "<rootDir>/node_modules/jest-scss-transform"
     }
  }
}

Example

Assume you have an scss file, e.g. colors.scss--

$brandPrimary: #000000;
$brandSecondary: #ffffff;

:export {
  brandPrimary: $brandPrimary;
  brandSecondary: $brandSecondary;
}

And you're importing those variables for use in your js app, e.g. colors.js--

import colors from 'colors.scss';

export const brandPrimary = colors.brandPrimary;
export const brandSecondary = colors.brandSecondary;

Webpack will compile these nicely, but Jest will not. Most configurations will result in undefined or empty string values for each of those constants.

Using this package, they'll be read-in as the string literal value of the scss variables. For example--

import * as colors from 'colors.js';

console.log(colors.brandPrimary); // $brandPrimary
console.log(colors.brandSecondary); // $brandSecondary

This makes for really nice snapshot tests, where instead of being written as hex codes (#04ae46), undefined, etc, style properties are written as their semantic scss variable names ($brandPrimary).

See the example directory for a demo of some basic snapshot output.