프런트엔드 테스트 입문

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

• ３장 처음 시작하는 단위 테스트
• ４장 목 객체
• ５장 UI 컴포넌트 테스트
• ６장 커버리지 리포트 읽기

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

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

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

$ npm test

４장 목 객체

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

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

$ npm test

５장 UI 컴포넌트 테스트

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

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

$ npm test

６장 커버리지 리포트 읽기

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

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

$ npm test