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>
);
}