Jest snapshot test helper for React components with various props sets.
Used to DRY up and reduce boilerplate in tests. Low barrier to entry = less effort = encourage more tests. If no props are provided, they will be generated via react-fake-props.
You may need enzyme-to-json in your Jest configuration to use this library.
Install
Use
importsnapshotsfrom'jest-snapshots'
importTestComponentfrom'./TestComponent'
snapshots(TestComponent,{
'with none':{},
'with one':{ one:'something'},
'with two':{ one:'something', two:'and more'}
})
Which, without jest-snapshots, would be effectively the same as writing tests manually as follows (but about half the noise; 11 vs. 5 lines, 401 vs. 220 characters):
Alternatively, you can pass an array of props sets, rather than provide names as keys (indexes will be used):
importsnapshotsfrom'jest-snapshots'
importTestComponentfrom'./TestComponent'
snapshots(TestComponent,[
{},
{ one:'something'},
{ one:'something', two:'and more'}
])
Or you can pass just a component reference, which will result in a single snapshot using no props (equivalent to passing [{}]):
snapshots(TestComponent)
To have jest-snapshots auto-generate props via react-fake-props, you must provide a file path to the component, rather than a class/function reference. There are two ways to achieve this. In either case, a .js suffix is assumed and added automatically if the path doesn't end in .js/.jsx/.ts/.tsx. You can pass an array including __dirname and it will be joined automatically.
importsnapshotsfrom'jest-snapshots'
snapshots([__dirname,'TestComponent'])
Or you can pass an explicit path:
import{join}from'path'
importsnapshotsfrom'jest-snapshots'
snapshots(join(__dirname,'TestComponent'))
Finally, here are more examples with additional options:
importsnapshotsfrom'jest-snapshots'
importTestComponentfrom'./TestComponent'
snapshots({
component: TestComponent,
mount:true,// Use enzyme's `mount` instead of `shallow`.
props:{
'with one':{ one:'something'},
'with two':{ one:'something', two:'and more'}
}
})
snapshots({
component:[__dirname,'TestComponent'],
// Pass options to `react-fake-props`, such as to generate optional props: