JestのSnapshotテスト

ReactのテストとしてJestでSnapshotテストを行うときのメモ。 ボコボコDOMが変化するコンポーネントのテストは非常に面倒なものだが、JestのSnapshotを使えばサクッとできて便利。 // Example.react.js import React, { Component } from 'react'; export default class Example extends Component { constructor() { super(); } render() { return ( <div> <p>text</p> </div> ) } } この単純なExampleコンポーネントのスナップショットを取るテストコードは以下のようになる。 toMatchSnapshotするだけ。便利。 // example.react.test.js 'use strict'; import React from 'react'; import Example from '../Example.react'; import renderer from 'react-test-renderer'; describe('Example', () => { it('レンダリングができること', () => { const tree = renderer.create( <Example /> ).toJSON(); expect(tree).toMatchSnapshot(); }); }); Jestを実行する。 $ jest __tests__/example.