掌握 Cypress 中的模擬與存根：綜合指南

發佈於2024-07-31

Mastering Mocking and Stubbing in Cypress: A Comprehensive Guide

介紹

當涉及到端對端測試時，控制外部依賴關係可以顯著提高測試的可靠性和速度。 Cypress 是一個現代 Web 測試框架，提供強大的模擬和存根 HTTP 請求的功能，可讓您模擬不同的場景，而無需依賴實際的後端服務。在這篇文章中，我們將探討如何利用 Cypress 的 cy.intercept() 進行模擬和存根 API 調用，以使您的測試更加健壯和高效。

為什麼要進行模擬和存根？

Cypress 中的模擬和存根 HTTP 請求有幾個好處：

隔離： 獨立於後端測試前端，確保您的測試不受後端變更或中斷的影響。
速度：透過避免實際的網路呼叫來減少測試執行時間。
可靠性：透過模擬各種響應和邊緣情況來創建可預測且一致的測試條件。
靈活性： 測試不同的場景，例如錯誤、反應緩慢和不同的資料負載，而無需更改後端。

設定賽普拉斯

如果您還沒有安裝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');
  });
});