[解決済み] ReactコンポーネントのJest SnapshotテストにおけるSnapshotテストの仕組みとtoMatchSnapshot()関数は何をするのか？

質問

私はJestのテストに慣れておらず、ReactコンポーネントのテストケースがJestでどのように書かれているのか、いくつかの例を見ていました。私はスナップショットテストに出会い、それが実際に何であるかを理解しようとしていました。そして、私がウェブから出会ったものは "スナップショットテストは、出力のJson表現を生成することによって、与えられたテストの結果をアサートする方法です."。 ということで、今現在Snapshot testingに2つの疑問があります。

1) 例えば、簡単な段落を持つシンプルなコンポーネントがあるとします。そこで、Snapshotテストを使ってテストしようとすると、それをどのようにコンポーネントのJSON表現に変換するのでしょうか。また、それはどのような場合に有効なのでしょうか？

2) というような例に出会いました。

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

そこで、上記のコードに対する私の疑問は、どのようにして toMatchSnapshot() という関数がここで動作するのでしょうか？

解決方法は？

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パッケージ この目的のために