介紹

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

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

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

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

設定賽普拉斯

如果您還沒有安裝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. 與Fixtures結合：將大量模擬資料儲存在fixture檔案中，以獲得更好的可維護性和可讀性。使用 cy.fixture() 裝載燈具。
3. 避免過度模擬： 僅模擬測試所需的內容。過度模擬可能會導致測試無法反映真實場景。
4. 測試真實的 API 呼叫：定期針對真實後端進行測試，以確保您的應用程式能夠正確處理實際資料。

結論

Cypress 中的類比和存根是強大的技術，可讓您的測試更快、更可靠、更易於維護。透過攔截 HTTP 請求並提供自訂回應，您可以建立各種測試場景，而無需依賴外部服務。請按照本指南中提供的最佳實踐和範例來掌握 Cypress 測試中的模擬和存根。

測試愉快！