소개

종단 간 테스트의 경우 외부 종속성을 제어하면 테스트의 안정성과 속도를 크게 향상시킬 수 있습니다. 최신 웹 테스트 프레임워크인 Cypress는 HTTP 요청을 조롱하고 스터빙하는 강력한 기능을 제공하므로 실제 백엔드 서비스에 의존하지 않고도 다양한 시나리오를 시뮬레이션할 수 있습니다. 이 게시물에서는 테스트를 더욱 강력하고 효율적으로 만들기 위해 API 호출 모킹 및 스터빙에 Cypress의 cy.intercept()를 활용하는 방법을 살펴보겠습니다.

왜 조롱하고 스터빙하는가?

Cypress의 HTTP 요청 모의 및 스텁은 다음과 같은 여러 이점을 제공합니다.

1. 격리: 백엔드와 독립적으로 프런트엔드를 테스트하여 테스트가 백엔드 변경이나 중단으로 인해 영향을 받지 않도록 합니다.
2. 속도: 실제 네트워크 호출을 방지하여 테스트 실행 시간을 줄입니다.
3. 신뢰성: 다양한 응답과 극단적인 사례를 시뮬레이션하여 예측 가능하고 일관된 테스트 조건을 만듭니다.
4. 유연성: 백엔드 변경 없이 오류, 느린 응답, 다양한 데이터 페이로드 등 다양한 시나리오를 테스트하세요.

Cypress 설정

아직 Cypress를 설치하지 않았다면 다음 명령을 사용하여 설정할 수 있습니다.

npm install cypress --save-dev
npx cypress open

진행하기 전에 기본 Cypress 프로젝트 구조가 준비되어 있는지 확인하세요.

cy.intercept() 사용하기

Cypress의 cy.intercept() 명령을 사용하면 네트워크 요청과 응답을 가로채고 수정할 수 있습니다. 더 이상 사용되지 않는 cy.route() 명령을 대체하고 더 많은 유연성과 성능을 제공합니다.

기본 예
API 응답을 모의하는 기본 예제부터 시작해 보겠습니다.

// cypress/integration/mock_basic.spec.js
describe('Mocking API Responses', () => {
  it('should display mocked data', () => {
    cy.intercept('GET', '/api/todos', {
      statusCode: 200,
      body: [
        { id: 1, title: 'Mocked Todo 1', completed: false },
        { id: 2, title: 'Mocked Todo 2', completed: true }
      ]
    }).as('getTodos');

    cy.visit('/todos');
    cy.wait('@getTodos');

    cy.get('.todo').should('have.length', 2);
    cy.get('.todo').first().should('contain.text', 'Mocked Todo 1');
  });
});

이 예에서는 /api/todos에 대한 GET 요청을 가로채고 모의 응답을 제공합니다. as('getTodos')는 가로채는 요청에 별칭을 할당하여 테스트에서 더 쉽게 참조할 수 있도록 합니다.

고급 모의 시나리오

오류 시뮬레이션
다양한 HTTP 오류 상태를 시뮬레이션하여 애플리케이션이 이를 처리하는 방법을 테스트할 수 있습니다.

// cypress/integration/mock_errors.spec.js
describe('Simulating API Errors', () => {
  it('should display error message on 500 response', () => {
    cy.intercept('GET', '/api/todos', {
      statusCode: 500,
      body: { error: 'Internal Server Error' }
    }).as('getTodosError');

    cy.visit('/todos');
    cy.wait('@getTodosError');

    cy.get('.error-message').should('contain.text', 'Failed to load todos');
  });
});

응답 지연
애플리케이션이 느린 네트워크 응답을 어떻게 처리하는지 테스트하려면 지연을 도입할 수 있습니다.

// cypress/integration/mock_delays.spec.js
describe('Simulating Slow Responses', () => {
  it('should display loading indicator during slow response', () => {
    cy.intercept('GET', '/api/todos', (req) => {
      req.reply((res) => {
        res.delay(2000); // 2-second delay
        res.send({ body: [] });
      });
    }).as('getTodosSlow');

    cy.visit('/todos');
    cy.get('.loading').should('be.visible');
    cy.wait('@getTodosSlow');
    cy.get('.loading').should('not.exist');
  });
});

특정 시나리오 조롱

조건부 조롱
요청 본문이나 헤더를 기반으로 조건부로 응답을 모의할 수 있습니다.

// cypress/integration/mock_conditional.spec.js
describe('Conditional Mocking', () => {
  it('should mock response based on request body', () => {
    cy.intercept('POST', '/api/todos', (req) => {
      if (req.body.title === 'Special Todo') {
        req.reply({
          statusCode: 201,
          body: { id: 999, title: 'Special Todo', completed: false }
        });
      }
    }).as('createTodo');

    cy.visit('/todos');
    cy.get('input[name="title"]').type('Special Todo');
    cy.get('button[type="submit"]').click();

    cy.wait('@createTodo');
    cy.get('.todo').should('contain.text', 'Special Todo');
  });
});

모킹 및 스터빙 모범 사례

1. 별칭 사용: 항상 .as()를 사용하여 가로채는 요청에 별칭을 할당합니다. 이렇게 하면 테스트를 더 읽기 쉽고 디버깅하기가 더 쉬워집니다.
2. Fixture와 결합: 더 나은 유지 관리 및 가독성을 위해 큰 모의 데이터를 Fixture 파일에 저장합니다. Fixture를 로드하려면 cy.fixture()를 사용하세요.
3. 과도한 조롱을 피하세요: 테스트에 필요한 것만 조롱하세요. 과도한 모의는 실제 시나리오를 반영하지 않는 테스트로 이어질 수 있습니다.
4. 실제 API 호출 테스트: 실제 백엔드에 대해 주기적으로 테스트하여 애플리케이션이 실제 데이터와 올바르게 작동하는지 확인하세요.

결론

Cypress의 모의 및 스터빙은 테스트를 더 빠르고 안정적이며 유지 관리하기 쉽게 만들 수 있는 강력한 기술입니다. HTTP 요청을 가로채고 사용자 지정 응답을 제공함으로써 외부 서비스에 의존하지 않고도 광범위한 테스트 시나리오를 만들 수 있습니다. Cypress 테스트에서 모킹 및 스터빙을 마스터하려면 이 가이드에 제공된 모범 사례와 예제를 따르세요.

즐거운 테스트를 진행하세요!