Nunjucks Powers Mozilla

    jest-scss-transform

    1.0.3 • Public • Published

    jest-scss-transform

    Branches coverage Functions coverage Lines coverage Statements coverage

    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.

    Install

    npm i jest-scss-transform

    DownloadsWeekly Downloads

    7,140

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    19.8 kB

    Total Files

    10

    Last publish

    Collaborators

    • routable