在Cypress 中如何 Mock 自定义请求数据

前言

在现代的前端开发中，端到端的测试成为了保证应用质量的关键部分。Cypress 是一个强大的端到端测试框架，它允许我们模拟后端 API 的请求和响应数据，以便我们能在开发过程中测试前端功能，即使后端尚未完全实现。

这篇文章将会教你如何在 Cypress 中模拟请求数据。

Mock 请求数据的静态方式

Cypress 提供了 .intercept() 方法，它允许我们拦截应用中的 HTTP 请求，并根据需要修改请求或响应。以下是一个基本的例子来说明如何使用 intercept 方法。

假设我们有一个前端应用，它会向 /api/users 发送 GET 请求以获取用户列表。我们希望在测试中模拟这个请求的响应数据。

步骤一、如何拦截请求

首先，在我们的测试文件中拦截 GET 请求：

javascript
describe('用户列表测试', () => {
  it('成功获取用户数据', () => {
    cy.intercept('GET', '/api/users', {
      statusCode: 200,
      body: [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' },
      ],
    }).as('getUsers');

    cy.visit('/'); // 访问我们的应用
    cy.wait('@getUsers'); // 等待拦截的请求
  });
});

步骤二、访问应用并验证

在我们的应用中访问相应的页面，并验证是否正确接收到了模拟的响应数据。

javascript
it('显示用户列表', () => {
  cy.visit('/'); // 访问应用的用户列表页面
  cy.wait('@getUsers'); // 确保请求被拦截

  // 验证页面上显示了我们模拟的用户数据
  cy.get('ul>li').should('have.length', 2);
  cy.get('ul>li').first().contains('Alice');
  cy.get('ul>li').last().contains('Bob');
});

Mock 请求数据的动态模拟数据

我们还可以动态地模拟数据，而不是硬编码响应体。例如，我们可以使用一个函数来生成响应：

javascript
cy.intercept('GET', '/api/users', (req) => {
  req.reply((res) => {
    res.send([
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
      // 更多动态生成的数据
    ]);
  });
}).as('getUsers');

模拟不同的响应状态

我们的应用可能需要处理不同的 HTTP 响应状态。下面是一个示例，展示如何模拟一个 404 错误：

javascript
it('处理用户列表加载失败', () => {
  cy.intercept('GET', '/api/users', {
    statusCode: 404,
    body: { message: 'Not Found' },
  }).as('getUsersFail');

  cy.visit('/error-page'); // 访问一个会触发错误的页面
  cy.wait('@getUsersFail'); // 确保拦截了请求

  // 验证页面上显示了错误消息
  cy.get('.error-message').should('contain', 'Not Found');
});

使用 Fixtures 模拟数据

Cypress 也允许我们使用 fixtures 来模拟数据。这是一种将响应数据存储在外部文件中的方法，有助于保持测试代码的整洁。

首先，我们在 cypress/fixtures 目录下创建一个 JSON 文件 users.json：

json
[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]

然后，在测试中这样使用它：

javascript
it('使用 fixtures 加载用户数据', () => {
  cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers');
  cy.visit('/users');
  cy.wait('@getUsers');

  cy.get('ul>li').should('have.length', 2);
});

结合使用 Mock 和实际请求

在某些情况下，我们可能希望结合 mock 数据和实际的 API 请求。例如，我们可能希望模拟一个用户的登陆流程，但同时对其他 API 请求保持透明代理。

javascript
it('模拟登陆，但其他请求保持原样', () => {
  cy.intercept('POST', '/api/login', {
    statusCode: 200,
    body: { token: 'fake-token' },
  }).as('login');

  // 其他请求不拦截，直接向服务器发送
  cy.intercept('GET', '/api/products').as('getProducts');

  cy.visit('/login');
  // ...执行登录操作
  cy.wait('@login');

  cy.visit('/products');
  cy.wait('@getProducts');
  // ...验证产品列表
});

总结

通过 Cypress 的 intercept 方法，我们能够在端到端测试中轻松地模拟后端请求和响应。这样做的好处是，我们可以在后端 API 完成之前开始测试前端功能，也可以测试边缘情况，比如后端服务不可用时的前端行为。使用 Cypress 和模拟数据，我们能够提高测试的稳定性和覆盖率，确保我们的应用即使在各种不同的服务器响应下也能正常工作。

通过以上方法，我们可以在测试中灵活地处理各种情况。记住，合理使用 mock 数据可以显著提升测试效率和质量。通过模拟，我们能够在不依赖后端服务的情况下测试前端逻辑，同时确保我们的测试环境更加稳定和可控。