介绍

当涉及到端到端测试时，控制外部依赖关系可以显着提高测试的可靠性和速度。 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 测试中的模拟和存根。

测试愉快！