프론트엔드
나만의 Jest Matchers 만들기
두줄요약
Jest Custom Matcher로 여러 CSS class 포함 여부를 한 번에 검증하는 방법을 설명했습니다. 설정 파일 등록, 타입 검증, TypeScript 타입 확장 과정을 함께 다뤘습니다.
구조와 흐름
expect(결과).toEqual(예상값)형태에서 결과와 예상값 관계를 검증하는 Jest Matcher 개념jest.setup.js를setupFilesAfterEnv에 등록하고expect.extend로 Custom Matcher 확장toContainAllClasses에서 요소의 class 목록과 기대 배열을 비교해 모든 class 포함 여부 판별
해결 방법
- 반복된
toContain호출 대신 class 배열을 인자로 받는toContainAllClassesMatcher 구성 HTMLElement와 배열 여부 사전 검증,pass와 실패 메시지 반환- TypeScript 환경에서
jest.d.ts의jest.Matchers인터페이스 확장
적용해볼 점
- 테스트 코드의 반복 검증 로직을 도메인 의미를 가진 Custom Matcher로 추상화
- 공통 Matcher 초기화 파일과 타입 선언 파일의 프로젝트 설정 포함
