Portfolio

🔥 문제 및 질문

테스트를 진행하던 중 어차피 페이지 단위로 테스트를 진행할 텐데 매번 render 함수를 사용해야 할까? 라는 의구심이 생겼다. 그래서 beforeAll 을 사용하여 모든 테스트를 진행하기 전에 render 함수를 실행시키려는 의도를 가지고 아래와 같이 코드를 작성했다.


import { render, screen } from "@testing-library/react";
import Login from "./Login";

beforeAll(() => {
  render(<Login />);
});

describe("로그인 Presenter 컴포넌트", () => {
  it("Devnity 문구가 보여야 한다.", () => {
    const titleElement = screen.getByText(/Devnity/i) as HTMLHeadingElement;
    expect(titleElement).toBeInTheDocument();
  });

  it("이메일 입력 폼이 보여야 한다.", () => {
    const emailElement = screen.getByPlaceholderText(
      "이메일"
    ) as HTMLInputElement;
    expect(emailElement).toBeInTheDocument();
  });
});

하지만 기대와 달리 아래와 같은 에러가 발생하였다.

📢 해결 과정

구글링 과정에서 이런 해결책을 보았고 한마디로 표현하자면 아래와 같다.

💡

사용중인 테스팅 프레임워크가 afterEach를 지원한다면 각 테스트 후에 Cleanup이 자동으로 호출되어 발생한 문제 (Cleanup 이란? render로 마운트된 리액트 트리들을 언마운트 시키는 과정)

(그래서 아마 첫 번째 테스트가 끝나고 Login 컴포넌트가 언마운트 돼서 생긴 문제로 추정된다.)

@testing-library/react 대신 @testing-library/react/pure 를 import 하여 간단히 해결할 수 있지만 공식문서에서 render를 호출했을 때 Cleanup이 호출되지 않으면 메모리 누수가 발생한다고 해서 이것을 강제로 끄는 것은 바람직해 보이지 않았고

beforeAll 대신 beforeEach를 사용하여 정상동작하는 것을 확인했다.

내가 추측한 내용을 정리하자면 다음과 같다. beforeAll은 모든 테스트가 시작하기 전에 1번 실행되므로 각각의 테스트가 동작할 때 마다 Cleanup이 자동으로 실행되어 위와같은 오류가 발생했을 것이고, beforeEach를 사용하면 각각의 테스트가 동작하기 전에 실행되므로 바로 이전 테스트에서 Cleanup이 되어도 다시 render가 호출되기 때문에 문제가 발생하지 않는다.

만약 틀린내용이 있다면 바로 잡아주시면 감사하겠습니다~!

📃 참고자료

테스팅 라이브러리 공식문서

beforeAll 에서 render 사용

🔥 문제 및 질문

📢 해결 과정

📃 참고자료