使用 cypress 和 firestore 测试反应应用程序显示超时重试：cy.wait()答案

【问题标题】：Testing react app with cypress and firestore shows Timed out retrying: cy.wait()使用 cypress 和 firestore 测试反应应用程序显示超时重试：cy.wait()
【发布时间】：2019-07-06 00:12:47
【问题描述】：

我正在使用 react 16.8.1、cypress 3.1.5 和 firebase 5.5.3 进行 e2e 测试。

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

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

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

在每个请求之前，我都会运行以下命令：

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 几乎和这个问题一样。

以前有人遇到过这个问题吗？希望有任何帮助

【问题讨论】：

标签： javascript reactjs firebase e2e-testing cypress

【解决方案1】：

您不应依赖 firestore 或 firebase 来启动测试，因为它是您无法控制的外部服务

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

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

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

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

【讨论】：

很好的答案，它帮助我解决了测试中的很多问题。