A next-generation tool to create blazing-fast documentation sites
API
created:9/1/2020
,
updated:2/21/2021

Overview

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:

Install

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

Examples

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

CLI

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"
},

CLI Parameters

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

ParameterExplanationInput typeDefault value
--renderer
-r
jest framework rendere'react' | 'rtr' | 'enzyme'react
--test
-t
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

or

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

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"
},

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