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:

• react-test-renderer
• react-testing-library
• enzyme

yarn add @component-controls/jest-snapshots --dev

The starter projects are set up to demonstrate no-code jest snapshots:

• gatsby
• nextjs
• storybook 5
• storybook 6

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.

"scripts": {
  ...
  "test": "cc-jest"
},

All of the compiler cli parameters are valid and a few additional parameters can be used:

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

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.

"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

const { renderers } = require('@component-controls/jest-snapshots/renderers');
const { runJestSnapshots } = require('@component-controls/jest-snapshots');
runJestSnapshots(renderers.enzyme);

"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