javascript - 使用 cypress 和 firestore 测试 React 应用程序显示超时重试 : cy. wait()

Question

我正在使用 react 16.8.1 , cypress 3.1.5和 firebase 5.5.3用于端到端测试。

目前我需要等待页面加载所有组件，然后运行测试，例如获取按钮并单击它。

在每次测试之前，程序会检查用户是否已登录，如果已登录，它将等待 firebase 发送一些 POST和 GET请求。

不幸的是柏树显示CypressError: Timed out retrying: cy.wait() timed out waiting 100000ms for the 1st response to the route: 'googleGETRoute'. No response ever occurred.对于 GET 和 POST 请求，这使得无法单击或继续测试。

在每个请求之前，我运行以下命令:

beforeEach(function () {
    cy.server().route({ url: /https:\/\/.*google.*/, method: "POST" }).as("googleRoute");
    cy.server().route({ url: /https:\/\/.*google.*/, method: "GET" }).as("googleGETRoute");
    cy.visit('/event');
    cy.wait('@googleRoute', xhr => {
        cy.url().then((url) => {
            if (url === 'http://localhost:3000/login') {
                cy.loginByForm(testUserAccount, testUserPassword);
            }
        });
    });
});

并删除事件:

it('should deleteEvent', function() {
    cy.wait('@googleGETRoute', { responseTimeout:100000, log:true });
    cy.wait('@googleRoute', { responseTimeout: 100000, log:true });

    deleteEvent(event);
    cy.contains(event.title).should('not.be.visible');
});

仍然没有来自 Firestore 的响应。我还检查了#1652和 #2374和这个问题几乎一样。

有没有人遇到过这个问题？将不胜感激任何帮助

Answer 1

您不应该依赖 firestore 或 firebase 来开始测试，因为它是您无法控制的外部服务，尤其是

• 这些 Firestore 请求何时发送？
• 这些请求的目的是什么？
• 它们是如何工作的？

如果我们不理解，我们就不能指望 Cypress 知道发生了什么，因为它是一个框架。

相反，您可以等待特定组件可用。默认情况下，cy.get 命令有 a built-in timeout .在测试失败之前，它将等待给定的组件被渲染。

在您的情况下，您可以增加第一个 cy.get 的超时，我认为它在 deleteEvent() 中。此外，您需要为 firestore 删除所有不可靠且无用的 cy.server 和 cy.wait。