web-dev-qa-db-ja.com

ReactコンポーネントのJest Snapshotテストで、スナップショットテストの仕組みとtoMatchSnapshot（）関数は何をしますか？

私はJestテストに不慣れで、JestでReactコンポーネント）のテストケースがどのように記述されているかの例をいくつか試してみました。私がWebから出会ったのは「スナップショットテストは、出力のJson表現を生成することにより、指定されたテストの結果をアサートする方法です。」したがって、現時点でのスナップショットテストには2つの疑問があります。 ：

1）単純な段落を持つ単純なコンポーネントがあるとします。それで、スナップショットテストを使用してテストしようとすると、それをコンポーネントのJSON表現にどのように変換しますか？そしてそれはいつ役立つのですか？

2）次のような例を見つけました。

    Wrapper = shallow(<First_Component />);

   it("displays the result", () => {
      const test = Wrapper.find(Second_Component).length;
      expect(test).toMatchSnapshot();
   });

したがって、上記のコードに関する私の質問は、toMatchSnapshot（）関数がここでどのように機能するかです。

reactjstddjestjssnapshot
11
pranami

Snapshotsを使用すると、コンポーネントが正しくレンダリングされるかどうかをテストできます。

expect(Wrapper).toMatchSnapshot()

特定のコンポーネントの出現回数をテストする場合は、2番目のコンポーネントをインポートして、テストを作成します。

it("displays the result", () => {
  const test = Wrapper.find(Second_Component).length;
  expect(test).toEqual(1); // or the number of occurrence you're expecting
});

コンポーネントのJSON表現に興味がある場合は、この目的に役立つ enzyme-to-jsonパッケージ を使用できます

3
t3__rry

この質問は十分な詳細で答えられていないと思います！スナップショットテストは、以前のテストの履歴に基づいています。スナップショットテストを初めて実行すると、コンポーネントツリーのテキストレンダーを含むテキストファイルが作成されます。たとえば、次のテスト：

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

次のテキストファイルを生成します。

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

これらのスナップショットファイルをVCS（git）に保持する必要があります。変更を加える場合は、これらのテストを実行して、スナップショットテキストファイルとまだ一致するかどうかを確認できます。

詳細については、このドキュメントをご覧ください： https://jestjs.io/docs/en/snapshot-testing

1
Iman Mohamadi