[react-router-dom + jest] TypeError: Cannot destructure property 'basename' of 'React__namespace.useContext(...)' as it is null.

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

useContext를 호출한 결과가 null이라서 basename을 가져올 수가 없답니다. 라우터가 provider를 사용하여 컨텍스트를 제공하니 Link 컴포넌트를 제거해보았고, 그것이 곧 정답이었습니다.

상황

• react-router-dom의 Link 컴포넌트를 사용한 컴포넌트를 단독으로 렌더링

import { render } from "@testing-library/react";
import { Header } from "shared/ui/header";

test("always true", () => {
  render(<Header />);
});

• Header 컴포넌트 안에는 메인 페이지로 되돌아가는 Link 컴포넌트가 사용되어 있습니다.
• Link 컴포넌트를 제거하니 오류가 발생하지 않았습니다.

---

해결

BrowserRouter를 직접 사용하지 않고 createBrowserRouter와 RouterProvider를 사용하였더라도 render의 wrapper 옵션으로써 BrowserRouter를 전달하여 라우터 관련 컨텍스트를 제공할 수 있습니다.

// react-router-dom의 BrowserRouter를 가져옵니다.
import { BrowserRouter } from "react-router-dom";

// render의 옵션으로 wrapper: BrowserRouter를 추가합니다.
render(<Header />, { wrapper: BrowserRouter });

import { fireEvent, render, screen } from "@testing-library/react";
import { Header } from "shared/ui/header";
import { BrowserRouter } from "react-router-dom";

test("헤더의 링크를 누르면 대상 페이지로 이동되어야 합니다.", () => {
  render(<Header />, { wrapper: BrowserRouter });
  const linkElement = screen.getByText(/some text/i);
  fireEvent.click(linkElement);
  expect(location.pathname).toContain("/new-url");
});

 

참고

https://testing-library.com/docs/example-react-router/