@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?
Configuring Stylable options
See the interface for StylableConfig here.
module.exports = {
transform: {
'\\.st\\.css?
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.
: '@stylable/jest',
}
};
Configuring Stylable options
See the interface for __INLINE_CODE_3__ here.
__CODE_BLOCK_3__
Ignore Stylable files from exsiting css integrations
To prevent existing CSS integrations from affecting Stylable files, ignore '.st.css' in the integration configuration.
Change:
__CODE_BLOCK_4__
To:
__CODE_BLOCK_5__
Ignoring __INLINE_CODE_4__ stylesheets
To disable transformation for stylehseets originating from your __INLINE_CODE_5__ add the following configuration:
__CODE_BLOCK_6__
License
Copyright (c) 2017 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a MIT license.
: ['@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:
__CODE_BLOCK_4__To:
__CODE_BLOCK_5__Ignoring __INLINE_CODE_4__ stylesheets
To disable transformation for stylehseets originating from your __INLINE_CODE_5__ add the following configuration:
__CODE_BLOCK_6__License
Copyright (c) 2017 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a MIT license.
: '@stylable/jest', } };Configuring Stylable options
See the interface for __INLINE_CODE_3__ here.
__CODE_BLOCK_3__Ignore Stylable files from exsiting css integrations
To prevent existing CSS integrations from affecting Stylable files, ignore '.st.css' in the integration configuration.
Change:
__CODE_BLOCK_4__To:
__CODE_BLOCK_5__Ignoring __INLINE_CODE_4__ stylesheets
To disable transformation for stylehseets originating from your __INLINE_CODE_5__ add the following configuration:
__CODE_BLOCK_6__License
Copyright (c) 2017 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a MIT license.