Next.js환경에서 Cypress시작하기 (Cypress 설치/실행)

공식홈페이지 와 일부 Cypress 게시글을 보고 정리한 게시글 입니다 ~ ✨

사내프로젝트 e2e 테스트 도구로 Cypress를 쓰고있어서 공부할겸 정리해보려고 합니다.

---

⚙️ Cypress 란?

cypress는 e2e 테스트 프레임워크예요.

 

e2e테스트란, 사용자가 사용하는 관점에서 테스트하는 방법이에요.

버튼 텍스트가 원하는대로 노출되는지, 버튼을 눌렀을 때 올바른 액션이 실행되는지와 같이

화면단에서 사용자가 겪을 모든 상황과 UI를 테스트해요.

 

자바스크립트 코드로 작성할 수 있어서, node기반 웹애플리케이션의 테스트가 필요할때 유용하게 쓰여요.

---

📌 시작하기전 

작성자가 cypress를 설치하려고하는 애플리케이션의 환경은 아래와 같습니다.

(환경이 다를 경우, 원활하게 진행되지 않을 수 있습니다.)

• Next.js 13
• typescript

---

🐭 설치

cypress를 사용할 애플리케이션에 설치를 먼저 해줍니다.

// npm
npm install cypress --save-dev

// yarn
yarn add cypress --dev

 

설치 뒤에, 아래 script를 package.json에 추가해주시고, 실행합니다.

{
  "scripts": {
    "cypress:open": "cypress open"
  }
}

 

성공적으로 실행되면, 아래와 같은 GUI 가 open될거에요.

😅 만약에 실행이 되지않고,

cypress tserror Option 'bundler' can only be used when 'module' is set to 'es2015' or later.

라는 에러를 만나게 되었다면, `tsconfig.json` 파일을 아래처럼 수정해주세요.

{
  "compilerOptions": {
	...
    "moduleResolution": "node", //node 로 변경
	...
}

---

🗂 기본 설정파일

GUI 에 E2E Testing 을 누르면 우측 사진처럼 기본 설정파일을 셋팅할 것인지 물어보는데요.

모두 체크를 해주시고, Continue 를 눌러줍시다.

그러면, 기본 설정파일이 프로젝트에 추가가 됩니다.

이제 이 파일들을 하나씩 살펴봅시다.

 

 

 

+--cypress.config.ts // cypress의 설정파일
+--cypress
      +--e2e
      |   +-- test1.cy.ts
      |   +-- test2.cy.ts
      +--fixtures
      |   +-- data.json
      |   +-- image.png
      +--support
      |   +-- commands.ts
      |   +-- e2e.ts
      +--screenshots
      +--videos

해당내용의 출처는 [Cypress] Cypress Settings 에서 가져왔습니다.

e2e

실제 테스트 코드가 포함되어 있는 디렉토리입니다.

`*.cy.ts` 형식으로 파일을 관리하고 있습니다.

 

fixtures

테스트에 필요한 데이터 를 담고 있는 디렉토리입니다.

json, image, ts 등 데이터 파일을 저장합니다.

 

support

commands 및 plugins 등을 전역 관리합니다.

테스트 실행 전 최우선적으로 import 되는 부분입니다.

 

screenshots / videos

테스트 실행 결과가 담긴 스크린샷과 비디오 파일이 자동으로 생성되는 곳입니다.

GUI와 Headless 실행 이후 실패한 결과값만 확인할 수 있습니다.

 

cypress.config.ts

Cypress 의 전반적인 환경설정 내용을 담을 수 있습니다.

export default defineConfig({
  e2e: { // 테스트 간 필요한 plugin들을 관리할 수 있습니다.
    setupNodeEvents(on, config) {
      // plugins or setNodeEvents
    },
    env: { // 테스트 실행에 필요한 환경변수를 설정할 수 있습니다.
      // environmental variables for cypress test.
    },
	baseUrl: '...' // 테스트를 실행하는 url 주소의 기본값을 설정할 수 있습니다. 
    // package.json에 이미 명시가 되어 있다면 override되지 않고 
    // package.json에서 설정한 url을 기본 값으로 인식합니다.
  },
});

다음게시글

2023.10.21 - [🌳Frontend/etc] - Next.js의 Cypress에서 테스트코드 실행해보기 (feat. MSW)