Jest를 사용한 CSS 단위 테스트

CSS 단위 테스트는 계산된 스타일, 클래스 적용 및 레이아웃 동작을 프로그래밍 방식으로 검증합니다. 브라우저 스크린샷이나 수동 시각 검사가 없어도 CSS 로직의 회귀(잘못 적용된 클래스, 누락된 수정자)를 찾아냅니다.

제스트는 기본적으로 JSDOM을 사용하지만 CSS 지원이 제한적이므로 레이아웃을 계산하거나 복잡한 선택자를 평가하지 못합니다. 기본적인 클래스 존재 여부와 인라인 스타일 테스트에는 JSDOM으로 충분하지만, 계산된 속성을 테스트하려면 CSS 모의 객체와 함께 jest-environment-jsdom을 사용하십시오.

컴포넌트를 렌더링하고 속성 또는 상태에 따라 올바른 CSS 클래스가 적용되는지 검증하십시오. 이를 통해 특정 스타일 값을 검증하지 않고도 조건부 클래스 로직(활성, 비활성화, 오류 변형)이 올바르게 작동하는지 확인할 수 있습니다.

제스트는 identity-obj-proxy를 사용하여 CSS 모듈 가져오기를 변환합니다. 이 프록시는 접근한 모든 속성에 대해 클래스 이름 문자열을 반환하므로 styles.primary는 "primary"를 반환합니다. 실제 CSS를 적용하지 않고도 테스트에서 클래스 이름을 검증할 수 있습니다.

Styled Components 프로젝트에서는 jest-styled-components가 toHaveStyleRule 매처를 추가합니다. 실제 브라우저에서 스타일을 계산하지 않아도 속성에 따라 스타일드 컴포넌트에 올바른 CSS 속성 값이 적용되는지 테스트할 수 있습니다.

jest-dom은 DOM 전용 매처를 사용하도록 제스트를 확장합니다. toHaveStyle은 인라인 또는 계산된 스타일을 확인하고, toHaveClass는 클래스 목록을 확인하며, toBeVisible은 표시, 가시성 및 불투명도를 확인합니다. 따라서 CSS 검증을 읽기 쉽고 표현력 있게 작성할 수 있습니다.

컴포넌트 스냅샷은 클래스 이름을 포함한 렌더링 마크업을 캡처합니다. CSS 모듈의 이름 변경이나 조건부 클래스 로직의 변경 사항은 스냅샷 차이로 나타납니다. 의도하지 않은 클래스 변경을 빠르게 찾아내는 데 유용하지만, 신중한 스냅샷 검토 원칙이 필요합니다.

제스트는 레이아웃(offsetWidth, getBoundingClientRect)을 계산하거나 미디어 쿼리를 평가하거나 CSS 애니메이션을 실행할 수 없습니다. 이러한 작업에는 Playwright 또는 Cypress를 통한 실제 브라우저 환경이 필요합니다. 제스트 CSS 테스트는 브라우저 기반 테스트를 대체하는 것이 아니라 보완합니다.

테스트에서 컨테이너 요소에 CSS 사용자 지정 속성을 설정하십시오. element.style.setProperty("--color-primary", "red")를 사용하면 됩니다. getComputedStyle(el).getPropertyValue("--color-primary")로 계산된 값을 읽으십시오. JSDOM은 사용자 지정 속성 읽기는 지원하지만 계단식 적용은 지원하지 않습니다.

애니메이션을 시작하는 클래스가 올바른 시점에 추가되고 제거되는지 확인하십시오. 모달 컴포넌트가 열릴 때 animate-enter 클래스를 추가하고 마운트 해제 전에 animate-exit 클래스를 추가하는지 테스트하면 됩니다. 애니메이션 CSS 자체는 VRT를 통해 테스트합니다.

CSS 로직은 JavaScript에 존재합니다. 조건부 클래스 문자열, 테마 제공자 값, 스타일 객체 생성이 그 예입니다. Jest의 커버리지 도구(Istanbul)는 이러한 JavaScript CSS 로직을 다룹니다. 모든 분기를 다루는 테스트를 작성하여 모든 변형과 상태 조합이 실행되도록 하십시오.

제스트에서 CSS 모듈과 함께 사용할 때 identity-obj-proxy는 어떤 작업을 합니까?

Jest를 사용한 CSS 단위 테스트는 실제 브라우저 없이 클래스 적용 로직, 조건부 스타일 지정 및 CSS 모듈 동작을 검증합니다. CSS 모듈에는 identity-obj-proxy를, Styled Components에는 jest-styled-components를, 읽기 쉬운 검증에는 jest-dom 매처를 사용하십시오. VRT와 결합하면 CSS 품질을 포괄적으로 다룰 수 있습니다.