jestでとあるコンポーネントがrenderされたかどうかだけをテストする

jestのテストを書いているとき、とあるコンポーネントがrenderされたかどうかだけをテストしたい場面が出てきたのでメモ

そのコンポーネントが正確にrenderされたかは関心がない（というか、そのコンポーネントを表示させるための準備が面倒だった）状態だったので、以下のようにモックしてあげることでテストを行った。

1import { render, screen } from "@testing-library/react";
2import * as Hoge from "./Hoge";
3
4jest.spyOn(Hoge, "Hoge").mockReturnValue(<>コンポーネントのモック</>);
5test("モックしたコンポーネントが表示される", ()=>{
6  render(<TargetComponent />);
7
8  expect.assertions(1);
9  expect(screen.queryByText(/コンポーネントのモック/)).toBeInTheDocument();
10});

TargetComponentの中でHogeを呼んでいる状態

← Back to home