TypeError: Cannot destructure property 'basename' of 'React10.useContext(...)' as it is null.

はじめに

ホーム画面から、新規登録はこちらを押すと/cards/registerに遷移することを確認するケースを実施しました。
そのさい、エラーが出て解決するまでの内容を記事にまとめました。

問題

HomeComponent

  it("新規登録はこちらを押すと/cards/registerに遷移する", async () => {
    render(
      <ChakraProvider value={defaultSystem}>
        <Home />
      </ChakraProvider>
    );
    const link = await screen.getByTestId("register-link");
    expect(link).toHaveAttribute("href", "/cards/register");
  });

Home

import { useNavigate, Link } from "react-router-dom";

return (

            <Link to="/cards/register" data-testid="register-link">
                名刺を登録する
            </Link>
	)

解決方法

MemoryRouterを使う方法がありました。

HomeComponent

import { MemoryRouter } from "react-router-dom";

  it("新規登録はこちらを押すと/cards/registerに遷移する", async () => {
    render(
      <MemoryRouter>
        <ChakraProvider value={defaultSystem}>
          <Home />
        </ChakraProvider>
      </MemoryRouter>
    );
    const link = await screen.getByTestId("register-link");
    expect(link).toHaveAttribute("href", "/cards/register");
  });

おわりに

参考文献