act(...) 경고에 대하여..

      Warning: An update to Option inside a test was not wrapped in act(...).
      
      When testing, code that causes React state updates should be wrapped into act(...):

 비동기 처리에 대한 테스트를 하다가 보면 해당 경고를 만날 수 있다.

경고에서는 act()로 감싸주라는 내용인데 이 act를 감쌈으로써 내부 로직이 동작 한 후에 DOM요소에 적용된 상태에서의 테스트를 하도록 하는 것이다.(act의 활용방법은 아래 코드와 같다.)

* act에 대해서 자세히 정리된 글이 있어 참조했다.(아래 링크)

test('test', () => {
  act(() => {
    /* DOM에 반영하고 싶은 코드들 */
    (예. ReactDOM.render(<Counter />, container);)
  });
  /* `DOM에 반영하고 싶은 코드들`이 DOM에 반영되었다고 가정하고 테스트할 코드들 */
});

testing-library/react의 act는 언제 써야할까

아니, 그럼 act로 싸주면 되잖아? 뭐가 문제야?
act(...)로 싸주는 것이 RTL이 업데이트 되면서 이미 render에서 해주고 있음에도 해당 이슈가 계속해서 발생하는 것이 문제다.

* 아래 RTL을 만든 멤버 중 하나인 kent의 블로그 글을 통해 알 수 있다.

Fix the "not wrapped in act(...)" warning

 

정확히 이 경고문구는 왜 발생하는 것일까?

:: 바로 비동기 처리절차의 순서 때문이다.
1. 컴포넌트가 마운트 된다.
2. 비동기로 웹 요청을 보낸다.
3. 웹 요청이 완료되기 전에 테스트가 완료되면서 테스트 내에서는 언마운트 된다.
4. 웹 요청에 대한 response로 업데이트 된다.

여기에서 3번과 4번에서의 순서 때문에 발생하는 경고라고 생각하면 된다.

그래서 해결책은 ??

우선! 클린업 함수를 통해 언마운트시에 웹 요청을 rebort시킨다.

  React.useEffect(() => {
    const controller = new AbortController();
    axios
      .get(요청 URL, {
        signal: controller.signal,
      })
      
    return () => {
      controller.abort();
    };
  }, []);​

* AbortController는 하나 이상의 웹 요청을 취소할 때 사용하는 객체이다.(자세한 건 여기로)
그리고 작성한 클린업 함수가 제대로 동작할 수 있도록 테스트 코드에도 언마운트 과정을 작성한다.

test(테스트명, () => {
  const { unmount } = render(<컴포넌트 />);

  // 테스트 로직
  
  unmount();
});

 

RTL을 사용하면서 마주칠 수 있는 흔한 이슈들은 아래 글을 참고해서 해결해보면 좋을 듯 하다!!

Common mistakes with React Testing Library