はじめに
TestingLibraryElementErrorで苦労したので、解決まで記載していきます。
問題
screen.debug()でどのように表示されるかを確認しました。
<body>
<div />
</body>
要は何も表示されていないことが判明しました。
解決方法
mock化する箇所が不足していたことが原因でした。
react-router-domやfirebase/authなどと同様にuseContextの部分をmock化することが解決につながることが判明しました。
アプリではPrivateRouteからAuthContextを呼んでいるため、mock化しました。
HomeComponent.spec
vi.mock("../context/AuthContext", () => ({
useAuthContext: () => ({
user: {
email: "test@test.com",
},
}),
}));
vi.mock("../router/PrivateRoute", () => ({
PrivateRoute: ({ children }: any) => <>{children}</>,
}));
describe("Home", () => {
it("Home title",async () => {
render(
<MemoryRouter>
<ChakraProvider value={defaultSystem}>
<PrivateRoute>
<Home />
</PrivateRoute>
</ChakraProvider>
</MemoryRouter>
);
expect(await screen.getByRole("heading", { name: "ホーム" })).toBeInTheDocument();
expect(await screen.getByText(`Welcome,${mockData[0].email}`)).toBeInTheDocument();
expect(await screen.getByText("本日のTODOリスト")).toBeInTheDocument();
});
});
✓ Home title 939ms
となったので解決しました。
おわりに
useContextをmock化するケース自体初めてなので、参考になりました。