jest-auto-snapshots
v3.0.1
Published
Fully automated Jest snapshot tests for React components
Downloads
3,130
Readme
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
orshapes
. 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
- Finds and parses your component's source
.jsx
file with react-docgen. - Parses your
Component.propTypes
tree and checks for different conditions (required vs optional props, boolean props, etc). - 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 withsomething: customPropType
in theirpropTypes
object.{name: 'Joe', age: 30}
will be injected for all components withuser: PropTypes.shape({ /* ... */ })
in theirpropTypes
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.