[Next.js] Cypress 설치 및 설정하기 (feat. TypeScript)

1. Cypress 설치 및 설정

1-1. Cypress 설치

npm install cypress --save-dev

 

1-2. Cypress 실행

npx cypress open

 

1-3. Cypress 실행 코드 package.json 에 등록

 

1-4. Typescript 설정

✅ cypress/tsconfig.json 파일을 생성 및 아래처럼 설정

{
  "compilerOptions": {
    "types": ["cypress"],
    "target": "ES6",
    "moduleResolution": "node",
    "lib": ["esnext", "dom"]
  },
  "include": ["**/*.ts"]
}

 

✅ cypress.config.ts 파일을 생성 및 설정 추가

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    baseUrl: "http://localhost:3000",
    supportFile: "cypress/support/e2e.ts",
    specPattern: "cypress/e2e/**/*.cy.ts",
    video: false,
    screenshotsFolder: "cypress/screenshots",
    downloadsFolder: "cypress/downloads"
  }
});

 

 

2. Cypress 테스트 구조

✅ Cypress에서 테스트 파일은 cypress/e2e 폴더에 위치하며, .cy.ts 확장자를 사용

ex) 

describe("홈 페이지 테스트", () => {
  it("홈 페이지가 정상적으로 로드되는지 확인", () => {
    cy.visit("/");
    cy.contains("환영합니다").should("be.visible");
  });
});