doeunn.log

React Testing Library(RTL) 소개 React Testing Library는 세부적인 구현 사항보다는 실제 사용자 경험과 유사한 방식의 테스트를 작성할 것은 권고합니다. 예를 들어 Hello world 라는 코드가 있다면 RTL은 태그를 사용하는지보다 Hello world 메시지가 브라우저에 노출이 되는지 파악하는 것을 더 중요하다고 봅니다. 구현보다는 기능에 초점을 맞춘 테스트 방식이라고 할 수 있습니다 :) RTL은 이름 그대로 React 컴포넌트를 테스트 하기 위해 만들어진 도구이기 때문에, 기본적으로 CRA에 내장되어 있습니다. RTL의 역할 - 테스트를 위한 가상 DOM을 생성 - DOM과 상호 작용하기 위한 유틸리티도 제공 - 브라우저 없이도 테스트를 가능하도록 테스트 유형 ..

Jest 이번 포스팅의 주제인 React Testing Library(RTL)는 컴포넌트를 가상 DOM으로 렌더링하는데 도움이 됩니다. 지난 글에서 render를 통해 확인했었습니다. 또한, 가상 DOM을 검색하는 데 도움이 되는데 create-react-app과 제공되는 테스트에서 getByText 메서드를 확인했습니다. 아직 사용하진 않았지만, 곧 가상 DOM과 상호 작용하여 요소를 클릭하거나 텍스트를 입력할 것입니다. 여기까지가 RTL의 역할입니다. 테스트 러너의 필요 → Jest 테스트를 찾고 실행하며 단언(Assertion)할 무언가가 필요합니다. 이때 Jest를 사용합니다. Jest가 유일한 테스트 러너는 아니며 Mocha나 Jasmine도 있지만 테스팅 라이브러리에서 Jest를 권장하며 cr..

Testing을 하는 이유 Testing이란 코드의 에러를 확인하고 추후 나타날 수 있는 이슈와 버그를 예측하는 과정인데요. 즉, 모듈, 함수에 특정 값을 대입했을 때 기대한 결과값이 도출되는지, 렌더링된 화면에 내가 원하는 요소, 콘텐츠 등이 들어있는지 등을 확인하기 위해서입니다. 이걸 다르게 생각해 보면, 내가 만든 서비스를 매번 일일이 실행한 후에 모든 기능을 손수 눌러서 확인하지 않고도 내가 의도한 대로 온전히 작동하는지 빠르게 점검하기 위함이 되겠습니다. 테스트 실행 $ npm test 위 명령어를 bash에 입력해주게 되면, Jest에서 Watch 모드 실행으로 시작되게 됩니다. 우선 지금은 a를 입력해서 테스트를 실행해 봅시다. 테스트는 실행했고, 한 개의 테스트를 찾아 통과했습니다. 그런데..