[Jest + RTL (next/link)] TypeError: Cannot read properites of null (reading 'useContext') ft. jest.mock

테스트 안돌아감

 

테스트 도입 고군분투 중..

 

텍스트 컴포넌트는 잘 돌아가는데 텍스트를 감싸주는 링크 컴포넌트는 테스트 자체가 안됐었다.

그러다 UnstyledLink 컴포넌트를 다시 보니 next/link 사용때문인가 해서 검색을 하니 mock을 추가해줘야 했다.

 

따라서 다음과 같이 코드를 추가했더니 잘 돌아간다.

import "@testing-library/jest-dom";
import "@testing-library/jest-dom/jest-globals";
import { render, screen } from "@testing-library/react";

import UnstyledLink, { LinkProps } from "../_link";

////////////////////////////////////// 💖 추가 //////////////////////////////////////
jest.mock("next/link", () => {
  const { cloneElement } = jest.requireActual("react");
  return ({ children, ...rest }: LinkProps) =>
    cloneElement(children, { ...rest });
});
////////////////////////////////////// 💖 추가 //////////////////////////////////////

it("link has '떡볶이'", () => {
  render(<UnstyledLink href="#">떡볶이</UnstyledLink>);
  screen.debug();
  expect(screen.getByText("떡볶이")).toBeInTheDocument();
});

 

---

📚 References 

https://stackoverflow.com/questions/71254835/jest-testing-link-next-link

Jest - testing Link (next/link)