컴포넌트 안에 들어가는 기능(onClick 이벤트 등 핸들러)과 전체적인 동작이 개발자의 의도대로 동작하는지 확인하는 코드 . jest는 Meta에서 개발한 js 테스트 프레임워크로 리액트와의 호환성이 뛰어나 리액트 프로젝트에서 많이 사용된다! 리액트 외에 Vue.js, Angular에서도 사용 가능하다
npm install --save-dev jest @testing-library/jest-dom @testing-library/react @types/jest
npm install @testing-library/user-event
패키지에 대한 설명
jest : 테스트 프레임워크 @testing-library/jest-dom : dom 관련 테스트 메쳐 추가제공 *테스트 메쳐: 테스팅프레임워크에서 사용되는 함수. @testing-library/react : 리액트 컴포는트를 테스트하기 위한 유틸리티 제공 @types/jest : 타입스크립트에서 jest를 사용할때 필요한 타입 제공 @testing-library/user-event 사용자이벤트를 시뮬레이션하여 테스트할수있게 함 .
테스트 코드를 작성 후 콘솔에서 npm test 를 입력하면 테스트코드가 돌아간다.
jest의 매쳐(matcher)를 사용해서 테스트를 진행해보자
describe : 테스트케이스들을 그룹화 하는 함수
it or test : 개별 테스트 케이스를 작성하는 함수. 둘 다 동일한 기능. describe 안에서 여러개를 작성 할 수도 있고, describe 없이 하나만 작성하는 것도 가능. 그러나 afterEach, beforeEach 등의 기능을 쓰기위해서는 describe안에 정의해야만 한다.
afterEach , beforeEach: 테스트 실행 전,후에 실행될 동작을 정의하는 함수. 테스트케이스별로 각각 동작한다.
afterAll , beforeAll: describe 그룹 내의 모든 테스트 가 동작하기 전,후로 한 번씩만 실행될 동작을 정의하는 함수.
expect : 테스트의 결과를 검증할때 사용. 특정 함수가 예상대로 동작하는지 확인하는 함수. e.g) expect(어떤value).toBe(어쩌고handler); => 어떤 value가 true일때 어쩌고 핸들러가 동작해야 한다.
테스트코드의 파일명은 (파일명).test.ts 등으로 작성하는 것이 일반적이다.
왜나하면, jest가 테스트 파일로 자동 인식하는 파일명 패턴이 정해져있기 때문이다!
패턴 종류 .test.js .test.jsx .test.ts .test.tsx .spec.js .spec.jsx .spec.ts .spec.tsx
이제 위에 소개한 메쳐들이 들어간 테스크 코드를 jest 공식문서에 나오는 코드를 사용해서 작성해보자
파일명 예시 : mathHook.test.ts
describe("덧셈 뺄셈 테스트 코드", ()=>{
beforeEach(()=>{
//각각의 테스트 코드 실행 전에 실행할 내용을 작성
//e.g) 변수 초기화 등
});
test('two plus two is four', () => {
expect(2 + 2).toBe(4);
});
it('four minus two is two', () => {
expect(4 - 2).toBe(2);
});
afterEach(()=>{
//각각의 테스트 코드 실행 후에 실행할 내용을 작성
//e.g) 리소스 해제 등 메모리 할당 해제
});
})
- describe를 통해 덧셈 테스트코드, 뺄셈 테스트코드를 하나의 그룹으로 묶고 - it or test를 사용해 각각의 테스트코드를 작성한다. - expect를 통해 기대되는 값을 확인한다.
