- 사용 요소 : Jest + React Testing Library + MSW
- 목표 : 실무 내 상품 판매 페이지에서 통합테스트 실행하기
- 데이터 패칭 + 전역 프로바이더 + 라우팅 + 사용자 인터랙션 + API 응답 분기
Jest - "테스트의 운영자(감독)"
📌 Jest란
1. Jest 파일 구조
- 페이스북에서 만들어진 테스팅 라이브러리
- Jest 파일 구조
- tests 폴더를 생성하여 저장
- Jest는 자동으로 test 파일을 찾아서 test case를 실행, tests 폴더가 기본 위치
- 파일 명 : 테스트 대상 코드 파일 이름과 일치하도록 작성
- 확장자 : .test.tsx 와 같이 .test 포함이 필요tests/
└── MyService.test.tsx
2. Jest 기초 사용법
describe("MyComponent", () => {
it("should render correctly", () => {
const { getByText } = render(<MyComponent />);
expect(getByText("Hello, Jest!")).toBeInTheDocument();
});
});- describe : 테스트 대상 정의
- it(test) : 테스트 케이스를 정의
- render : 테스트 대상 컴포넌트를 렌더링
- expect : 값을 테스트하며, 주로 match 함수와 함께 사용
- matcher : 값을 테스트 할 수 있는 여러가지 함수들
| Matcher | 정의 |
|---|---|
.toBe(value) | 원시 값을 비교하거나 객체 인스턴스의 참조 id를 엄격하게 비교 |
.toEqual(value) | 객체·배열 같은 복합 데이터 구조의 모든 프로퍼티를 재귀적으로 비교 (깊은 비교) |
.not | matcher의 반대조건 수행 예) .not.toBe(value) → 값이 주어진 값과 다름을 확인 |
.toBeFalsy() | 값이 falsy 값인지 확인 (false, 0, "", null, undefined, NaN) |
.toBeTruthy() | 값이 truthy 값인지 확인 |
.toBeGreaterThan(number) | 값이 > 숫자인지 확인 |
.toBeGreaterThanOrEqual(number) | 값이 >= 숫자인지 확인 |
.toBeLessThan(number) | 값이 < 숫자인지 확인 |
.toBeLessThanOrEqual(number) | 값이 <= 숫자인지 확인 |
.toBeInstanceOf(Class) | 주어진 객체가 특정 클래스의 인스턴스인지 확인 |
.toBeDefined() | 값이 undefined가 아닌지 확인 |
.toBeUndefined() | 값이 undefined인지 확인 |
.toBeNull() | 값이 null인지 확인 |
.toBeNaN() | 값이 NaN인지 확인 |
.toContain(item) | 배열이 특정 항목을 포함하는지 확인 |
.toContainEqual(item) | 배열이 특정 객체나 값과 동등한 항목을 포함하는지 확인 |
.toHaveProperty(keyPath, value?) | 객체가 키 경로에 해당하는 프로퍼티를 가지고 있는지, (선택) 그 값이 주어진 값과 동일한지 확인 |
.toHaveLength(number) | 객체가 .length 프로퍼티를 가지고 있고, 그 길이가 주어진 숫자와 동일한지 확인 |
.toMatch(regexp \| string) | 문자열이 정규표현식과 일치하거나 문자열이 주어진 문자열을 포함하는지 확인 |
.toMatchObject(object) | 객체가 주어진 객체와 일치하는지 확인 |
.toThrow(error?) | 함수가 호출될 때 오류를 던지는지 확인, (선택) 특정 오류 또는 오류 메시지가 던져지는지 확인 |
3. 테스트 실행하기
npx jest- 테스트 결과는 콘솔에 출력됨
