javascript - 使用 Cypress 在 SVG 上测试 onclick 事件

Question

我正在使用 Cypress 测试一个 d3 应用程序。在测试中，我想确保在单击 SVG 元素中的圆圈时调用特定函数。当我手动单击时调用该函数，但我编写的测试失败了，所以我假设我在测试的某个地方犯了一个错误。 这是我现在的测试代码:

import * as app from "../../app";

describe("Scatter plot", () => {
  before(() => {
    cy.visit("http://localhost:1234");
  });
  it("Triggers the displayMovieInfo on click", () => {
    const displayMovieInfo = cy.spy(app, "displayMovieInfo");
    cy.get("#scatterPlot")
      .get("circle")
      .eq(0)
      .click({ force: true });

    expect(displayMovieInfo).to.be.called;
  });
});

我从 Cypress 获得的输出:

expected displayMovieInfo to have been called at least once, but it was never called

任何帮助将不胜感激!

更新: 我相信点击可能以前没有用过，因为当柏树试图点击它时圆圈不存在。通过添加“await cy.wait(1000);”在单击操作之前，该函数被调用(我可以看到结果和从其中记录的消息)。可悲的是，测试仍然失败。

更新 2: 我将测试更改为使用窗口对象(见下文)，但断言仍然失败(测试本身成功，这也不是一件好事)。

 cy.window()
      .then(window => {
        displayMovieInfoSpy = cy.spy(window, "displayMovieInfo");
        cy.get("#scatterPlot")
          .get("circle")
          .eq(2)
          .click({ force: true })
          .as("clicking");
        expect(displayMovieInfoSpy).to.be.called;
      });

更新 3: 似乎 d3 和 parcel.js 的组合导致测试失败。单独使用 d3 或单独使用 parcel.js 时，测试工作正常。 此外，expect 语句应该在点击操作之后的 then block 中。

Answer 1

您似乎是直接在测试中导入应用程序变量。该对象与您浏览器上的对象不同。您应该制作一个全局变量(或方法)以直接从您的浏览器获取您的应用程序变量

cy.window().its('app').then((app) => { 
   // your test with app var
})

您可能还想使用 then() 条件来确保它在之后进行检查。但这可能不是必需的。

.click({ force: true }).then(() => {
   expect(displayMovieInfo).to.be.called;
});