act 함수와 renderHook 함수 내 rerender 차

Question

안녕하세요 궁금한게 있습니다. act 함수에 대해 이해했는데 act 함수없이 아래와 같이 해도 테스트가 통과되더라구요. 혹시 차이가 있을까요? it('훅의 toggleIsModalOpened()를 호출하면 isModalOpened 상태가 toggle된다.', () => { const { result, rerender } = renderHook(useConfirmModal); result.current.toggleIsModalOpened(); rerender(); expect(result.current.isModalOpened).toBe(true); });

코드 조커, 오프 · Answer

안녕하세요! 우선 강의의 내용을 먼저 정리해보면, act API의 경우 상호 작용(렌더링, 이펙트 등...)을 함께 그룹화하고 실행해 리렌더링과 업데이트가 실제 앱이 동작하는 것과 유사한 방식으로 동작합니다. 테스트에서 검증하고자 하는 내용은 toggleIsModalOpened() 메서드가 실행하면 훅 내의 state가 제대로 업데이트 되는지, 즉 위에서 언급한 것 처럼 상호 작용등이 한 번에 실행되어 원하는 상태로 업데이트 되는지를 검증하는 테스트이기 때문에 act API를 사용하는 것이 적합하다고 할 수 있습니다. rerender 함수 또한 강의에서 간단하게 언급드리긴 했지만, 원하는 인자와 함께 같은 컨테이너 내에서 새로 호출해 상태를 업데이트 하는 함수입니다. 주로 prop 변경에 따른 컴포넌트의 상태를 검증할 때 사용하곤 합니다. 이런 맥락에서, toggleIsModalOpened()를 호출한 뒤 rerender()를 명시적으로 호출한 뒤의 상태를 검증하는 흐름 자체가 테스트 내용에 적합한 동작의 흐름이라고 보기는 조금은 어색하게 느껴집니다. 관련해서 강의에서 언급하는 것처럼 테스트는 사용자의 실제 사용과 유사하게 테스트 할 수록 신뢰도가 올라간다고 말씀드리고 있는데요. 실제로 RTL 가이드 문서에서 rerender에 대한 설명( https://testing-library.com/docs/react-testing-library/api/#rerender )에는 (훅이 아닌 컴포넌트의 rerender에 해당하는 설명이지만, 동일한 맥락인 것 같습니다.) prop 업데이트를 올바르게 수행하는지를 검증하는 것을 권장하지, 구현 개념의 rerender를 사용해 prop에 따른 컴포넌트 세부 구현상황이 변경되는 것을 검증하는 것을 권장하지 않는다고 하고 있습니다. 현재 상황과 완벽하게 매칭되는 이야기는 아닐지라도 각 API의 목적에 맞게 테스트를 작성한 뒤 검증해야 테스트의 목적에 맞는 결과를 얻을 수 있을 것이라 생각합니다.   설명이 부족했다면 추가로 댓글 남겨주세요! 좋은 질문 감사합니다. 😃