【Jest】スナップショットテスト

あるコンポーネントを修正した結果、予期せぬページが変更されており表示崩れを起こしていた

これを防ぐためスナップショットを導入したい

スナップショットテストは、一度レンダリングされたコンポーネントの状態を保存しておき、テストを実行する度にそのスナップショットを比較して差分をチェックするテスト

jestjs.io

以下のようなテストを書いて実行すると

import React from 'react';
import Link from '../Link.react';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

__snapshots__フォルダ内に次のようなスナップショットファイルが作られる

exports[`renders correctly 1`] = `
<a
  className="normal"
  href="http://www.facebook.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Facebook
</a>
`;

このスナップショットファイルはコミットしておく

スナップショットの更新は以下

jest -u