jest-auto-snapshots

Automatically generate prop fixtures and snapshot tests for your React components

import snap from 'jest-auto-snapshots';
import MyComponent from '../MyComponent';

snap(MyComponent);

↓

Why?

Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.

jest and enzyme-to-json are great tools, but writing tests for all the different possible rendering states and maintaining props is tedious and unnecessary. Really, we just want to know when & where a snapshot changes and if the change was intentional.

What this script does (or aspires to do):

• Save time when writing simple A -> B rendering tests.
• Automatically update, add, and remove snapshot tests when component props change.
• Ensure that all possible component rendering states are covered.

What it doesn't do (but might in the future):

• Deeply test all prop possibilities nested in arrays or shapes. This would just create way to many tests and should be handled manually (or, better yet, strive to make your component props as flat as possible). I'm open to a settings option to allow for this in future iterations, though.
• Save time running tests. It's only supposed to save time writing tests.

How

1. Finds and parses your component's source .jsx file with react-docgen.
2. Parses your Component.propTypes tree and checks for different conditions (required vs optional props, boolean props, etc).
3. Generates fixtures and tests based on the data above.

Setup

Important: This module requires jest, enzyme, and enzyme-to-json to be correctly configured and working in your project. jest-auto-snapshots is supplemental to these tools and does not provide them for you.

Install

npm i jest-auto-snapshots --save-dev or yarn add jest-auto-snapshots --dev

Example

MyComponent.jsx

const MyComponent = ({ stringProp, booleanProp, nodeProp }) => (
  <div>
   {booleanProp && <span>Hello</span>}
   {stringProp}
   {nodeProp}
  </div>
);

MyComponent.propTypes = {
  booleanProp: PropTypes.bool,
  stringProp: PropTypes.string,
  nodeProp: PropTypes.node,
};

MyComponent.test.js

import snap from 'jest-auto-snapshots';
import MyComponent from '../MyComponent';

snap(MyComponent);

MyComponent.test.js.snap (generated from the example code above)

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`when boolean prop "booleanProp" is set to: "false" 1`] = `
<div>
  jest-auto-snapshots String Fixture
  <NodeFixture />
</div>
`;

exports[`when passed all props 1`] = `
<div>
  <span>
    Hello
  </span>
  jest-auto-snapshots String Fixture
  <NodeFixture />
</div>
`;

exports[`when passed only required props 1`] = `
<div>
  jest-auto-snapshots String Fixture
</div>
`;

Advanced Examples

For advanced examples highlighting different use cases, please check out the examples directory

API

snap(
  component: <Component:required>,
  config: <Object:optional>,
);

Config

There are 2 ways to change configuration for the script. Either at the root level in your jest setup file or in each individual test. The params are the same for both:

{
  /**
   * by default jest-auto-snapshots populates all fixtures for props like string, bool, shape, etc.
   * but you can override those fixtures with your own, or support custom prop types.
   */

  fixtures: {
    // propTypeName: propFixture,
    // ...
  },

  /**
   * jest-auto-snapshots needs to parse the actual component file
   * in order to see which props it needs. By default, it expects
   * your test file to be in a directory next to your component. But
   * if you prefer your tests to sit right nect to your component
   * (or any other location) you can override the default with `relativePath`
   */

  relativePath: '../',
  
  /**
   *  optionally set the file extension for your component files (default is 'jsx')
   */

  extension: 'js',
}

Set Config at the Root Level

In your jest setup file:

const jestAutoSnapshots = require('jest-auto-snapshots');

jestAutoSnapshots.configure({
  fixtures: {
    customPropTypeExample: 'custom prop fixture example',
  },
  relativePath: './',
});

Set Config at the Test Level

In your test file:

import snap from 'jest-auto-snapshots';
import CustomProps from '../CustomProps';

snap(CustomProps, {
  fixtures: {
    customPropTypeExample: 'custom prop fixture example',
  },
  relativePath: './',
});

Note: any of these config options supplied at the test level will override any config settings from your jest setup file.