#vitest

Frontend › Testing

fetch로 데이터를 받고, 자식 컴포넌트를 가져오고, Context에서 콜백을 받는 컴포넌트를 Vitest와 Testing Library로 테스트하는 세 가지 기법: 전역 fetch 바꿔 끼우기(vi.stubGlobal), 모듈 목(vi.mock), Provider로 테스트용 값 주입. 각 기법의 정리 방법과 한계, 그리고 MSW와 테스트하기 쉬운 설계로 넘어갈 시점을 정리한다.

• #testing
• #react
• #frontend

Frontend › Testing

테스트가 도는 런타임(Node·Deno·Bun 또는 브라우저)과 그 안에서 쓸 수 있는 API가 테스트 환경이다. 순수 로직은 어디서든, 작은 컴포넌트는 jsdom·happy-dom 같은 DOM 에뮬레이션에서, 레이아웃·제스처·사용자 흐름은 실제 브라우저(CI에서는 헤드리스, 필요하면 Xvfb)에서 테스트한다. 환경에 기대지 않는 로직을 떼어 낼수록 테스트가 쉬워진다.

• #testing
• #frontend
• #javascript

Frontend › Testing

테스트는 개발 중 watch 모드로, 병합 전 PR 상태 검사로, 병합 뒤 main 브랜치의 CI로 세 번 돈다. 기본 test 스크립트는 몇 초 안에 끝나게 두고, PR에서 통과했는데 CI에서 깨지는 이유(변경 간 경합, 플레이키 테스트, 매번 돌리지 않는 비싼 테스트)와 빨간 빌드에 되돌리기·앞으로 고치기로 대응하는 법, 경보 피로를 줄이는 법, 한 파일 커버리지·테스트 파일 제외·타임존 고정 같은 실행 옵션을 정리한다.

• #testing
• #ci
• #ci-cd
• #javascript
• #jest

Frontend › Testing

거의 모든 테스트 프레임워크가 주는 공통 부품을 정리한다. 실패하면 던지는 단언(참·동등·깊은 동등), assert 스타일과 expect(BDD) 스타일, 스냅숏 단언, 테스트 케이스와 스위트(test·suite / it·describe), beforeEach·afterEach·beforeAll·afterAll, 비동기 코드를 기다리는 법(async·resolves/rejects·expect.assertions)과 가짜 타이머, 테스트 파일을 두는 위치. 이름은 도구마다 달라도 개념은 같다.

• #testing
• #javascript
• #jest