Reactスナップショットテスト

スナップショットテストは、Reactコンポーネントのテストに特に役立ちます。 それがどのように行われるか見てみましょう。

react-test-renderer

シリアル化する前に、Reactコンポーネントをレンダリングする必要があります。 必ずreact-test-rendererをインストールしてください。

yarn add --dev react-test-renderer

コンポーネントのスナップショットの作成

ボタンをクリックしたときに人をページングするコンポーネントがあるとしましょう

// Pager.js
import React from 'react';

export default function Pager({ name }) {
  const onClickCallback = () => alert(`Paging ${name}!`);
  return (
    <div>
      <h1>{name}</h1>
      <button onClick={onClickCallback}>Page</button>
    </div>
  );
}

テストは次のようになります

// Pager.test.js
import React from 'react';
import renderer from 'react-test-renderer';

import Pager from './Pager';

it('looks okay.', () => {
  const name = 'John';
  // Render the component with the props.
  const tree = renderer.create(<Pager name={name}/>)
  // Convert it to JSON.
    .toJSON();
  // And compare it to the snapshot.
  expect(tree).toMatchSnapshot();
});

スナップショットは__snapshots__フォルダーに移動し、以降のすべてのテスト実行はそれと比較されます。 そこから、Pagerを自由に編集できます。 同じ小道具が同じ結果をもたらす限り、スナップショットは一致します。 しかし、それも問題です。

スナップショットは特効薬ではありません

オブジェクトはシリアライズ可能ですが、関数（したがってコールバック）はシリアライズできないことに注意することが重要です。 Pager.test.js.snapを開くと、onClickCallbackが[Function]として表されていることがわかります。

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

exports[`properly writes name. 1`] = `
<div>
  <h1>
    John
  </h1>
  <button
    onClick={[Function]}
  >
    Page
  </button>
</div>
`;

Pagerが書き直されて、onClickCallbackが別のことを行う場合でも、スナップショットは通過します。

export default function Pager({ name }) {
  // Not what you want it to do, but it will still pass.
  const onClickCallback = () => alert(`Paging {name}!`);
  return (
    <div>
      <h1>{name}</h1>
      <button onClick={onClickCallback}>Page</button>
    </div>
  );
}