@stylable/jest

@stylable/jest is a simple integration that allows testing your Stylable React components using Jest.

Installation

Install @stylable/jest as a dev dependency in your local project.

Install using npm:

npm install @stylable/jest --save-dev

Install using yarn:

yarn add @stylable/jest --dev

Usage

Add the transformer to your jest.config.js file:

module.exports = {
  transform: {
    '\\.st\\.css?$': '@stylable/jest',
  }
};

Configuring Stylable options

See the interface for StylableConfig here.

module.exports = {
  transform: {
    '\\.st\\.css?$': ['@stylable/jest', { stylable: { /* Stylable options */ } }],
  }
};

Ignore Stylable files from exsiting css integrations

To prevent existing CSS integrations from affecting Stylable files, ignore '.st.css' in the integration configuration.

Change:

"moduleNameMapper": {
  "\\.(css|scss)$": "SOME_MOCK_PATH"
},

To:

"moduleNameMapper": {
  "(?<!\\.st)\\.(css|scss)$": "SOME_MOCK_PATH"
},

Ignoring node_modules stylesheets

To disable transformation for stylehseets originating from your node_modules add the following configuration:

module.exports = {
  // existing configuration...
  
  transformIgnorePatterns: [
    '/node_modules/(?!(.*?\\.st\\.css$))', // libraries publish .st.css files in their dist
  ],
};

License

Copyright (c) 2017 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a MIT license.