React에서 Cypress로 테스트 작성하기

 

오늘날 애플리케이션 개발에서 테스트는 필수 요소로 자리 잡았습니다. 특히 React와 같은 프론트엔드 라이브러리를 사용할 때, 사용자 경험(UX)을 보장하고 유지보수를 원활하게 하기 위해 테스트를 작성하는 것은 매우 중요합니다. 이 글에서는 Cypress를 활용해 React 애플리케이션의 테스트를 작성하는 방법을 단계별로 알아보겠습니다.

---

Cypress란 무엇인가요?

Cypress는 현대적인 웹 애플리케이션을 위한 엔드투엔드(E2E) 테스트 프레임워크입니다. 다음과 같은 특징으로 인해 많은 개발자들 사이에서 선호되고 있습니다.

• 빠르고 안정적: 테스트 실행 속도가 빠르고, 브라우저에서 실제로 렌더링된 결과를 확인하며 테스트할 수 있습니다.
• 간단한 설치: 복잡한 설정 없이 설치 후 바로 사용 가능합니다.
• 개발자 친화적: 읽기 쉬운 테스트 코드와 유용한 디버깅 도구를 제공합니다.
• 다양한 테스트 지원: 단순한 E2E 테스트뿐만 아니라 통합 테스트와 일부 단위 테스트도 작성할 수 있습니다.

---

Cypress 설치 및 기본 설정

먼저 Cypress를 프로젝트에 설치하고, React 애플리케이션에서 사용할 수 있도록 설정해 보겠습니다.

1. Cypress 설치

터미널에서 아래 명령어를 실행해 Cypress를 설치합니다:

npm install cypress --save-dev

또는 Yarn을 사용하는 경우:

yarn add cypress --dev

2. Cypress 초기화

설치 후, Cypress를 초기화하려면 아래 명령어를 실행하세요:

npx cypress open

위 명령어를 실행하면 Cypress의 GUI가 열리고, 기본 디렉토리 구조가 생성됩니다:

/cypress
  /e2e
  /fixtures
  /support
cypress.config.js

3. 기본 설정 업데이트

cypress.config.js 파일을 열어 테스트 환경에 맞게 기본 설정을 변경합니다. 예를 들어, React 애플리케이션의 기본 URL을 설정할 수 있습니다:

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    setupNodeEvents(on, config) {
      // 노드 이벤트 설정
    },
  },
});

---

React 컴포넌트 테스트 작성하기

Cypress를 사용해 React 애플리케이션의 다양한 기능을 테스트하는 방법을 살펴보겠습니다. 아래는 간단한 React 애플리케이션의 사례를 사용한 테스트 예제입니다.

1. 테스트 대상 React 컴포넌트

아래는 "할 일 목록(To-Do List)" 컴포넌트의 코드입니다:

import React, { useState } from 'react';

const TodoApp = () => {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState('');

  const addTask = () => {
    if (input.trim()) {
      setTasks([...tasks, input]);
      setInput('');
    }
  };

  return (
    <div>
      <h1>To-Do List</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="할 일을 입력하세요"
      />
      <button onClick={addTask}>추가</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

2. Cypress 테스트 작성

위 컴포넌트를 테스트하기 위해 아래와 같은 E2E 테스트를 작성할 수 있습니다. cypress/e2e/todo.cy.js 파일을 생성하고 다음 코드를 추가하세요:

describe('To-Do App', () => {
  beforeEach(() => {
    cy.visit('/'); // baseUrl이 설정된 경우 '/' 경로만 입력하면 됩니다.
  });

  it('헤더가 올바르게 렌더링된다', () => {
    cy.get('h1').should('have.text', 'To-Do List');
  });

  it('새로운 할 일을 추가할 수 있다', () => {
    cy.get('input[placeholder="할 일을 입력하세요"]').type('Cypress 공부하기');
    cy.get('button').contains('추가').click();
    cy.get('ul').should('contain', 'Cypress 공부하기');
  });

  it('빈 입력값은 추가되지 않는다', () => {
    cy.get('button').contains('추가').click();
    cy.get('ul').children().should('have.length', 0);
  });
});

테스트 설명

1. cy.visit('/'): 애플리케이션의 루트 URL을 방문합니다.
2. cy.get(selector): CSS 셀렉터를 사용해 DOM 요소를 선택합니다.
3. should('condition'): 선택한 요소가 특정 조건을 만족하는지 검증합니다.
4. type(value): 입력 필드에 값을 입력합니다.
5. contains(text): 텍스트를 포함하는 요소를 찾습니다.
6. click(): 클릭 이벤트를 트리거합니다.

---

고급 설정 및 팁

1. Mocking 및 Stub 사용

Cypress는 네트워크 요청을 모의(Mock)하거나 스텁(Stub) 처리하는 기능을 제공합니다. 이를 통해 백엔드 API와의 의존성을 제거하고 더 빠르고 안정적인 테스트를 작성할 수 있습니다.

예:

describe('API 요청 테스트', () => {
  beforeEach(() => {
    cy.intercept('GET', '/api/tasks', { body: ['테스트 태스크 1', '테스트 태스크 2'] }).as('getTasks');
    cy.visit('/');
  });

  it('API로부터 할 일 목록을 가져온다', () => {
    cy.wait('@getTasks');
    cy.get('ul').should('contain', '테스트 태스크 1');
  });
});

2. 커스텀 명령어 생성

반복되는 코드를 줄이기 위해 cypress/support/commands.js에 커스텀 명령어를 추가할 수 있습니다:

Cypress.Commands.add('addTask', (task) => {
  cy.get('input[placeholder="할 일을 입력하세요"]').type(task);
  cy.get('button').contains('추가').click();
});

사용 예:

it('커스텀 명령어로 할 일을 추가한다', () => {
  cy.addTask('Cypress 테스트 작성');
  cy.get('ul').should('contain', 'Cypress 테스트 작성');
});

---

결론

Cypress는 React 애플리케이션에서 테스트를 작성하고 실행하기 위한 강력하고 직관적인 도구입니다. E2E 테스트부터 통합 테스트까지 다양한 시나리오를 다룰 수 있으며, React의 컴포넌트 기반 구조와도 잘 맞습니다. 이번 글에서 소개한 기본 설정과 테스트 작성 방법을 참고해 여러분의 프로젝트에 Cypress를 도입해 보세요. 꾸준한 테스트 작성을 통해 애플리케이션의 안정성과 품질을 크게 향상시킬 수 있습니다.