테스팅
- Published on
- Cypress, Playwright, Vitest, Jest 네 가지 테스팅 도구를 Next.js에 설정하는 방법을 배워보세요.
리액트와 Next.js에서는 목적과 사용 사례에 따라 다양한 유형의 테스트를 작성할 수 있습니다. 이 페이지에서는 애플리케이션을 테스트할 때 사용할 수 있는 유형과 일반적으로 사용되는 도구에 대한 개요를 제공합니다.
테스트 유형
- 단위 테스트는 개별 단위(또는 코드 블록)를 독립적으로 테스트하는 것을 말합니다. 리액트에서 단위는 단일 함수, 후크 또는 컴포넌트가 될 수 있습니다.
- 컴포넌트 테스트는 단위 테스트의 더 집중된 버전으로, 테스트의 주된 대상이 리액트 컴포넌트입니다. 이는 컴포넌트의 렌더링 방식, props와의 상호 작용 및 사용자 이벤트에 대한 반응 방식을 테스트할 수 있습니다.
- 통합 테스트는 여러 단위가 함께 작동하는 방식을 테스트합니다. 이는 컴포넌트, 후크 및 함수의 조합일 수 있습니다.
- End-to-End (E2E) 테스트는 실제 사용자 시나리오를 시뮬레이션하는 환경에서 사용자 흐름을 테스트하는 것을 말합니다. 예를 들어, 생산 환경과 유사한 환경에서 특정 작업(예: 가입 흐름)을 테스트합니다.
- 스냅샷 테스트는 컴포넌트의 렌더링 출력을 캡처하고 스냅샷 파일에 저장하는 것을 포함합니다. 테스트를 실행할 때 컴포넌트의 현재 렌더링 출력이 저장된 스냅샷과 비교됩니다. 스냅샷의 변경 사항은 예상치 못한 동작 변경을 나타내는 데 사용됩니다.
Async 서버 컴포넌트
async 서버 컴포넌트는 리액트 생태계에 새로워 일부 도구에서 완전히 지원되지 않습니다. 그 동안에는 단위 테스트보다 End-to-End 테스트를 사용하는 것이 좋습니다.
가이드
아래 가이드를 참고하여 이러한 일반적으로 사용되는 테스팅 도구로 Next.js를 설정하는 방법을 배워보세요.