[React] Watch 모드와 테스트가 작동하는 방식

Jest

이번 포스팅의 주제인 React Testing Library(RTL)는 컴포넌트를 가상 DOM으로 렌더링하는데 도움이 됩니다. 지난 글에서 render를 통해 확인했었습니다. 또한, 가상 DOM을 검색하는 데 도움이 되는데 create-react-app과 제공되는 테스트에서 getByText 메서드를 확인했습니다. 아직 사용하진 않았지만, 곧 가상 DOM과 상호 작용하여 요소를 클릭하거나 텍스트를 입력할 것입니다. 여기까지가 RTL의 역할입니다.

 

테스트 러너의 필요 → Jest

테스트를 찾고 실행하며 단언(Assertion)할 무언가가 필요합니다. 이때 Jest를 사용합니다.

Jest가 유일한 테스트 러너는 아니며 Mocha나 Jasmine도 있지만 테스팅 라이브러리에서 Jest를 권장하며 create-react-app과 함께 제공됩니다. 효율적이고 사용이 쉽기도 합니다 :)

그래서 터미널에서 npm test를 실행했을 때 create-react-app에서 제공하는 npm script를 실행했고 그 스트립트가 Jest를 Watch 모드로 실행되게 했습니다.

 

Jest Watch Mode

Watch 모드는 Jest를 실행하는 방법으로 마지막 커밋(Commit) 이후 파일의 모든 변경 사항을 확인해서 마지막 커밋 이후 변경된 파일과 연관된 테스트만 실행합니다. 

 

npm test를 실행했을 때 마지막 커밋 이후 변경된 파일이 없다면 어떤 테스트도 실행하지 않습니다. Jest에서 파일을 확인하다가 테스트와 관련된 변경 사항을 확인하고 테스트를 다시 실행하게 됩니다. 

 

Jest 원리

테스트 통과나 실패는 어떻게 아는 걸까요?

2개의 인자를 가진 전역 테스트 메서드가 있습니다.

첫 번째 인자와 두 번째 인자를 살펴봅시다.

첫 번째 인자는 테스트의 문자열 설명이며 Jest에서 이 인자를 사용해서 테스트에 실패했을 때 어떤 테스트에 실패했는지 알려줄 수 있습니다. 보통 1개 이상의 테스트를 실행하기 때문입니다.

첫 번째 인자를 통해 구별

두 번째 인자는 테스트 함수입니다. Jest는 테스트의 성공과 실패를 결정하기 위해 이 함수를 실행합니다. 어떻게 실행할까요? 테스트는 테스트 함수를 실행할 때 에러가 발생하면 실패하게 됩니다. 그리고 단언은 예상이 틀렸을 때 에러가 발생하도록 합니다. 그래서 테스트 함수에 에러가 없으면 테스트에 통과합니다. 그렇기 때문에 빈 테스트도 통과되어야 합니다.