React 애플리케이션 테스트 Cypress 설정

소개

진행 중인 시리즈의 여섯 번째 부분은 최신 React 애플리케이션을 테스트하는 방법에 관한 것입니다. 이번에는 End-to-End 테스트 프레임워크인 초기 구성Cypress 방법에 대해 살펴보겠습니다.

이 시리즈의 이전 부분에서는 unit-testing framework with Vitest 을(를) 설정하는 방법을 살펴보았습니다. 단위 테스트는 필요한 경우 기능 또는 구성 요소 전용 테스트와 같이 더 고립되고 개별적인 코드 조각을 다룹니다.

반면에 Cypress와 그 테스트는 테스트가 사용자가 애플리케이션을 사용하는 방식과 유사하게 작동할 것이라는 확신을 실제로 얻을 수 있는 다른 큰 덩어리를 처리합니다. 따라잡기 위해 간단한 베어본 앱이 하는 일을 살펴보겠습니다.

버튼을 클릭하면 서비스에서 게시물을 가져와 페이지에 표시합니다.

사이프러스란?

해당 페이지로 이동할 때 표시되는 첫 번째 문구는 다음과 같습니다.

Fast, easy and reliable testing for anything that runs in a browser.

이 인용문의 키워드는 브라우저입니다. Cypress의 테스트 러너는 브라우저 환경을 복제합니다. 즉, 우리가 만드는 모든 테스트는 브라우저에서 실행되는 것처럼 정확하게 작동합니다. 이것은 우리에게 엄청난 자신감을 줍니다!

또한 Cypress를 사용하면 Google Chrome 및 Firefox와 같은 여러 브라우저 환경에서 테스트할 수 있습니다. Cypress는 때때로 고유한 구문을 제공하지만 Vitest 또는 Jest에 익숙하다면 자연스럽게 나올 것입니다. 문서는 적극적으로 관리되고 잘 구성되어 있습니다.

Take a look at them



Unsplash의 Sincerely Media 사진

충분한 이야기, Cypress 설정을 시작하겠습니다.

Cypress용 구성 파일

먼저 필요한 종속 항목을 설치해야 합니다.

npm install cypress --save-dev

또는

yarn add cypress --dev

다른 라이브러리와 마찬가지로 cypress.json 프로젝트의 루트에 구성 파일이 있습니다. 계속해서 만들어 보겠습니다. 이 파일 내에서 다양한 플래그를 설정할 수 있습니다. 모든 옵션을 더 잘 이해하려면 문서에서 이 항목article을 확인하십시오.

Cypress 테스트를 처음 시작할 때 테스트하려는 페이지를 수동으로 방문해야 합니다. 따라서 매번 전체 URL을 작성하는 대신 이 구성에 baseUrl을 포함합니다.

{
  "baseUrl": "http://localhost:3000"
}

이를 통해 우리가 설정해야 하는 유일한 다른 구성은 package.json의 스크립트입니다.

"scripts": {
    // ...other scripts,
    "e2e": "cypress open",
  },

지금까지 전체 저장소를 확인하십시오here.

다음에 우리는 Cypress로 첫 번째 테스트를 만들고 MSW와의 통합이 유지되는지 확인할 것입니다.

연결하자

이 내용이 마음에 드셨다면 언제든지 저에게 연락하거나

내newsletter에서 내 무료 개발자 로드맵과 주간 기술 산업 뉴스를 확인하십시오.