The jest-snapshots package automatically creates snapshot tests for your component based on the already created documentation stories.
3 levels from ease of use to full control:
- Easy to use cli with "zero" configuration.
- More advanced custom tests level using compiler cli and jest cli.
- Full control cusom scripts to launch the compiler and jest.
Supports a variety of test renderers:
yarn add @component-controls/jest-snapshots --dev
The starter projects are set up to demonstrate no-code jest snapshots:
The command-line interface for jest-snapshots allows for the quickest, zero-config setup. You can add a test
script to your package.json
file
Using this approach will generate a temporary test file in tests/stories.test.js
that will be used by jest to generate the snapshots.
package.json
"scripts": {..."test": "cc-jest"},
All of the compiler cli parameters are valid and a few additional parameters can be used:
Parameter | Explanation | Input type | Default value |
---|---|---|---|
--renderer -r | jest framework rendere | 'react' | 'rtr' | 'enzyme' | react |
--test -t | tests output folder | string | tests |
Additionally, all jest cli parameters apply. If a jest
parameter name conflicts with a cc-jest
parameter (for example the -c
config path parameter), you can prefix the jest
parameter with jest-
prefix
yarn cc-jest -c .storybook --coverage
or
yarn cc-jest -c .storybook jest---coverage true
Using this approach, you will create a custom test file and use directly jest to run your test suite. Before launching the jest tests, you will need to compile the stories using the compiler cli
stories.test.js
const path = require('path');const { renderers } = require('@component-controls/jest-snapshots/renderers');const { runJestSnapshots } = require('@component-controls/jest-snapshots');runJestSnapshots(renderers.enzyme,path.resolve(process.cwd(), 'output', 'component-controls.js'),);
and in package.json
configure a test
script to compile the stories and then launch jest
with the bundle in the output
folder.
package.json
"scripts": {..."test": "ccc -c .config -d output && yarn jest && rm -rf output"},
A full list of the compiler cli parameters.
If the output folder is not specified, the bundle is located in the public
folder
stories.test.js
const { renderers } = require('@component-controls/jest-snapshots/renderers');const { runJestSnapshots } = require('@component-controls/jest-snapshots');runJestSnapshots(renderers.enzyme);
package.json
"scripts": {..."test": "ccc -c .config && yarn jest && rm -rf public"},
Using this approach, you will have full control over the stories bundle to select which stories to test.
A more detailed article on creating custom test scripts can be found here