cypress 监视来自 React 组件的函数调用

Question

我想监视一个在单独文件中定义并由多个 React 组件调用的函数。

例如我有这个 test.js 文件：

export const func = {
  call: (e) => console.log(e),
};

这是由多个 React 组件导入的，我想用 cypress 监视这个函数，但它从未被调用过：

import { func } from "../../src/test";

describe("template spec", () => {
  it("calls func.call", () => {    
    cy.visit("/");
    cy.spy(func, "call");
    //some more code ...
    expect(func.call).to.be.called
  });
});

我是 cypress 测试的新手，所以我可能误解了间谍的概念。我做错了什么？

Answer 1

我已经测试过这段代码，它工作正常。

我认为您可能做错了什么： 我认为您尚未在反应应用程序中执行此方法。间谍方法只有在找到相关方法时才有效，否则它总是会失败。

这是我实现的代码片段/如何实现。

在app.js文件中执行了函数调用方法：

 useEffect(() => {
    func.call("error");
  }, []);

在柏树中，我已经执行了您提供的代码：

describe("template spec", () => {
  it("calls func.call", () => {
    cy.visit("/");
    cy.spy(func, "call");
  });
});

这是 cypress 的输出结果：

为了更清楚请告诉我。