A next-generation tool to create blazing-fast documentation sites


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.


"scripts": {
"test": "cc-jest"

CLI Parameters

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

ParameterExplanationInput typeDefault value
jest framework rendere'react' | 'rtr' | 'enzyme'react
tests output folderstringtests

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


yarn cc-jest -c .storybook jest---coverage true

Custom tests

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');
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');


"scripts": {
"test": "ccc -c .config && yarn jest && rm -rf public"

Custom scripts

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