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, '../MyComponent.jsx');

↓

 PASS  examples/MyComponent/__tests__/MyComponent.test.js
  jest-auto-snapshots > MyComponent
    ✓ Matches snapshot when passed only required props (3ms)
    ✓ Matches snapshot when passed all props (2ms)
    ✓ Matches snapshot when boolean prop "booleanProp" is set to: "false" (1ms)

Why?

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

jest and react-test-renderer are fantastic tools, but writing tests for all the different possible rendering states and maintaining props is tedious. Really, we just want to know when & where a component snapshot changes and if that change was intentional.

For example, take the following simple component: <MyComponent active />. In order to make sure MyComponent is fully covered in snapshot tests, we would have to write (and maintain) two separate tests for the boolean active state.

jest-auto-snapshots can detect the different prop types your component uses and create those shapshot tests for you!

If MyComponent's props ever get changed/added/removed jest-auto-snapshots will just create and run new snapshot tests.

See the bigger example below for more info.

What this does (or aspires to do):

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

What it doesn't do:

• Deeply test all prop possibilities nested in arrays or shapes. This would just create way to many snapshots 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.
• Test functionality for you. You should still write manual tests for things like button clicks, component state changes, etc.
• 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.

Install

yarn add jest-auto-snapshots --dev or npm i jest-auto-snapshots --save-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.jsx');

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>
`;

More Examples

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

API

snap(
  component: <Component:required>,
  componentFilePath: <String:required>,  // jest-auto-snapshots needs to parse the component file itself to determine prop fixtures
  config: <Object:optional>,             // optionally set fixtures for the component tests (see Config section below)
);

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:

Key	Description	Defaults
fixturesByPropKey	Inject component prop fixtures bassed on the prop key	None
fixturesByPropType	Inject component prop fixtures based on the prop type	see src/configure.js. By default it covers all the core propTypes.

Set Config at the Root Level

In your jest setup file:

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

jestAutoSnapshots.configure({
  fixturesByPropType: {
    customPropType: 'custom fixture',
  },
  fixturesByPropKey: {
    user: { name: 'Joe', age: 30 },
  },
});

For the above example:

• 'custom fixture' will be injected for all components with something: customPropType in their propTypes object.
• {name: 'Joe', age: 30} will be injected for all components with user: PropTypes.shape({ /* ... */ }) in their propTypes object.

Set Config at the Test Level

In your test file:

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

snap(CustomProps, '../CustomProps.jsx', {
  fixturesByPropType: {
    customPropType: 'custom fixture',
  },
  fixturesByPropKey: {
    user: { name: 'Joe', age: 30 },
  },
});

For the above example, these custom fixtures will only be injected for the current test.