Not wrapped in act 에러를 만나다

Not wrapped in act

react-testing-library를 사용해서 테스트코드를 작성하던 도중 아래와 같은 에러를 만나게 되었습니다.

Not wrapped in act ...

그래서 찾아본 결과 리액트에서 컴포넌트에서 아무것도 일어나지 않을것으로 예상하고 있을 때 컴포넌트에서 무슨일이 발생하면 나오는 경고이다. 예를 들어 리액트의 상태값이 바뀐다거나 하는 경우를 들 수 있을 것 같습니다.

해결방법

아래와 같이 감싸주면 무슨일이 발생할 것(렌더링, 상태변경)이라는 것을 리액트에게 알려준다.

act(() => {

})

기본적으로 react-testing-library를 사용하는 경우 내부에서 act로 감싸고 있기 때문에 위의 에러가 발생하지 않습니다.

// 원래는 이렇게 act로 감싸주어야 한다.
act(() => {
	ReactDOM.render(<Counter />, container);
});

// 리액트 테스팅 라이브러리에서 감싸주기 때문에 아래와 같이 작성해도 된다.
render(<Counter />);

그럼 왜 Not wrapped in act 에러가 나는가

그럼 react-testing-library를 사용하고 있는데 Not wrapped in act가 왜 발생하는 걸까요.

컴포넌트가 비동기 API 호출을 하거나 렌더링이 완료되기 이전에 테스트가 종료되는 경우 해당 에러가 발생하게 됩니다. 이러한 경우에는 act로 감싸주어야 합니다.

추가적으로 waitFor API를 이용해서 컴포넌트의 업데이트가 완료될때까지 테스트가 끝나지 않도록 기다리게 하여도 됩니다.

`findBy`를 사용해도 됩니다.