프런트엔드 테스트 입문

이 저장소는 '프런트엔드 개발자를 위한 테스트 입문'의 3장부터 6장까지의 내용이 담긴 저장소입니다. 이 저장소는 처음으로 프런트엔드 환경에서 테스트를 작성하는 분들을 대상으로 만들었습니다. 따라서 Jest의 기본적인 사용방법을 설명하는 부분이 많습니다.

３장 처음 시작하는 단위 테스트

Jest를 사용해서 작성한 테스트 코드를 설명합니다. 처음으로 테스트를 작성해보는 분들에게 적합한 내용입니다.

【예제 코드】src/03/**/*.test.ts

$ npm test

테스트에 필수적인 '목 객체'의 사용법을 설명합니다. Jest는 공식적으로 목 객체를 지원하고 있습니다.

【예제 코드】src/04/**/*.test.ts

$ npm test

Node.js에는 DOM API가 없습니다. 하지만 jsdom이라는 DOM API를 가상화한 환경을 사용하면 실제 브라우저를 사용한 것과 유사한 테스트가 가능합니다. Testing Library는 UI 컴포넌트를 테스트할 수 있도록 지원하는 라이브러리입니다.

【예제 코드】src/05/**/*.test.tsx

$ npm test

단위 테스트와 통합 테스트에 능숙해졌다면 커버리지 리포트를 확인하여 테스트가 부족한 부분을 찾아봅시다. 커버리지 리포트를 읽으면 테스트 코드 작성 포인트가 명확해집니다.

【예제 코드】src/06/**/*.test.{ts,tsx}

$ npm test