인프런 커뮤니티 질문&답변
작성한 질문수
act 함수와 renderHook 함수 내 rerender 차
해결된 질문
작성
·
328
1
안녕하세요 궁금한게 있습니다. act 함수에 대해 이해했는데 act 함수없이 아래와 같이 해도 테스트가 통과되더라구요. 혹시 차이가 있을까요?
it('훅의 toggleIsModalOpened()를 호출하면 isModalOpened 상태가 toggle된다.', () => {
const { result, rerender } = renderHook(useConfirmModal);
result.current.toggleIsModalOpened();
rerender();
expect(result.current.isModalOpened).toBe(true);
}); 답변 1
0
안녕하세요!
우선 강의의 내용을 먼저 정리해보면, 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의 목적에 맞게 테스트를 작성한 뒤 검증해야 테스트의 목적에 맞는 결과를 얻을 수 있을 것이라 생각합니다.
설명이 부족했다면 추가로 댓글 남겨주세요! 좋은 질문 감사합니다. 😃