[React Test] not wrapped in act 경고

Not wrapped in act 경고

리액트에서 act 경고는 컴포넌트에서 아무것도 일어나지 않을 것으로 예상하고 있을 때 컴포넌트에 어떤 일이 일어나면 나오는 경고이다.

act 함수로 감싸주어야 한다.

act(()=>{
	// fire event that update state
	});

• 지금까지 act로 감싸준 적이 없는데 잘 된 이유

react-testing-library 내부 API에 act를 이미 내포하고 있어서 따로 설정하지 않아도 됐다.

(리액트 콜 스택 안에 있을 때)

• 에러가 난 이유

컴포넌트가 비동기 API 호출로 렌더링이 일어나기 전에 테스트가 종료되는 경우 act로 감싸주어야 한다. (리액트 콜 스택 밖에 있어서)

이 때는 waitFor API를 사용해 테스트가 끝나기 전에 컴포넌트가 다 업데이트 되기를 기다려야 한다.

• 해결

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

const firstPageButton = screen.getByRole("button", {
    name: "돌아가기",
  });
  userEvent.click(firstPageButton);

  await waitFor(() => {
    screen.getByRole("spinbutton", { name: "America" });
  });

// 혹은 await screen.findByRole("spinbutton", { name: "America" });