Cypress 自动化测试实践：使用 cy.stub 模拟函数

自动化测试是现代前端开发流程不可或缺的环节，Cypress 是一款流行的基于 JavaScript 的端到端自动化测试工具。在测试中，有时我们需要模拟函数的行为，以便更好地进行测试。Cypress 提供了一个非常有用的工具，cy.stub，可以帮助我们实现这个目标。

cy.stub 的作用

cy.stub 可以模拟函数的行为，使其返回我们预期的值或抛出异常，从而方便我们编写测试用例。特别是在集成测试中，当我们需要模拟后端 API 的返回值时，cy.stub 是一种很好的实现方式。

示例

我们来看一个具体的例子。假设我们需要测试一个购物车组件，它需要调用一个名为 addToCart 的函数将商品加入购物车，并根据返回值判断是否操作成功。我们可以使用以下代码进行测试：

describe('Shopping Cart', () => {
  it('can add item to cart', () => {
    // 模拟 addToCart 函数
    cy.stub(window, 'addToCart').returns(true);

    // 加入购物车
    cy.get('.add-to-cart-button').click();

    // 验证结果
    cy.get('.cart-count').should('have.text', '1');
  });
});

在上述测试用例中，我们使用 cy.stub 模拟了 addToCart 函数的行为，并使其返回 true，表示加入购物车成功。然后我们通过点击“加入购物车”按钮来调用 addToCart 函数，并验证购物车中的商品数量是否正确。

实践建议

虽然 cy.stub 看起来很简单，但在实践中，我们需要注意一些细节：

1. 如果要模拟的函数位于全局命名空间中，则可以直接使用 cy.stub(window, 'functionName') 的方式来模拟。如果要模拟的函数位于某个对象的命名空间中，例如 obj.functionName，则应该使用 cy.stub(obj, 'functionName') 的方式来模拟。

2. 如果我们需要模拟异步函数的行为，并使其返回 Promise 对象，则可以使用 cy.stub().resolves 或 cy.stub().rejects 的方式来模拟。例如：

cy.stub(window, 'fetch').resolves({
  json: () => ({ data: 'example' }),
});

cy.stub(window, 'fetch').rejects(new Error('Failed to fetch'));

1. 可以使用 cy.stub().callsFake 的方式来自定义函数的行为，从而可以实现更复杂的测试场景。例如：

cy.stub(window, 'addToCart').callsFake((item) => {
  const cart = JSON.parse(window.localStorage.getItem('cart') || '[]');
  cart.push(item);
  window.localStorage.setItem('cart', JSON.stringify(cart));
  return true;
});

在上述代码中，我们自定义了 addToCart 函数的行为，在加入购物车时将商品信息存储在本地存储中，并返回 true 表示操作成功。

总结

Cypress 的 cy.stub 工具可以方便地模拟函数的行为，使我们在测试时更加灵活。在实践中，我们需要根据实际情况灵活应用 cy.stub，并注意一些细节和技巧。希望本文对大家了解和使用 Cypress 自动化测试有所启发。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b7138aadd4f0e0fffacef6