A tiny helper to snapshot a React Component under every angles.
$ yarn add --dev jest-shot
simple.js
import React, { Component } from 'react';
class Nested extends Component {
render() {
return <p>Yo nested!</p>;
}
}
export default class Simple extends Component {
constructor() {
super();
this.state = { status: 'pristine' };
}
render() {
return (
<div>
{this.props.message}
{`State status: ${this.state.status}`}
<Nested/>
</div>
);
}
}
__tests__/test-simple.js
import shot from 'jest-shot';
import Simple from '../simple';
shot(Simple, [
{
description: 'can take props',
props: {
message: 'hello',
}
},
{
description: 'can also override state',
state: {
status: 'dirty',
}
}
{
description: 'can also snap full tree instead of a shallow snap',
mount: true,
}
])
__tests__/__snapshots__/test-simple.js.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Simple can take props`] = `
<Simple>
<div>
hello
State status: pristine
<Nested/>
</div>
</Simple>
`;
exports[`Simple can also override state`] = `
<Simple>
<div>
hello
State status: dirty
<Nested/>
</div>
</Simple>
`;
exports[`can also snap full tree instead of a shallow snap`] = `
<Simple>
<div>
hello
State status: pristine
<Nested>
Yo nested!
</Nested>
</div>
</Simple>
`;