preact-jest-snapshot-test-boilerplate

A boilerplate for a very minimal setup running Jest snapshot tests on Preact components using preact-render-to-string rendering.

Requirements

The following are the very minimal requirements in order to use the Jest snapshot tests.

Jest
- jest-serializer-html-string plugin dependency
- extra config added on package.json file
Preact
- preact-render-to-string
Babel
- babel-plugin-transform-react-jsx

Example walkthrough

Component example

A very simple stateless functional component is defined on the ./thing.js file:

module.exports = ({ name, link }) => (
	<a href={ link }>{ name }</a>
);

Snapshot testing

The boilerplate on how to snapshot-test using Jest is available on ./__tests__/thing.js:

const render = require('preact-render-to-string');
const Thing = require('../thing');

describe('Thing component', () => {
	it('should render with a provided name', () => {
		const tree = render(
			<Thing name="Lorem Ipsum" />
		);
		expect(tree).toMatchSnapshot();
	});
});

Snapshots

Snapshot of expected rendering are stored on ./__tests__/__snapshots__/thing.js.snap:

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

exports[`Thing component should render a thing containing a link 1`] = `<a href="https://mobile.twitter.com">Lorem Ipsum</a>`;

Running tests

If you need more info about Jest please visit their documentation. In order to run the tests from this example just run:

npm test

Updating snapshots

Keep in mind that when working with snapshots and modifying components, the snapshots needs to be updated in order for tests to pass. To do so just run:

npm test -- -u