Testing react app with cypress and firestore shows Timed out retrying: cy.wait()

Question

I'm using react 16.8.1, cypress 3.1.5 and firebase 5.5.3 for e2e tests.

Currently I need to wait for the page to load all the components and then run the tests like getting a button and clicking on it.

Before each test, the programm checks if the user is logged in and if so, it'll wait for firebase to send some POST and GET requests.

Unfortunately cypress shows CypressError: Timed out retrying: cy.wait() timed out waiting 100000ms for the 1st response to the route: 'googleGETRoute'. No response ever occurred. for both GET and POST requests, which makes clicking or continuing the tests impossible.

Before each request I run the following:

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);
            }
        });
    });
});

And to delete an event:

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');
});

still no responses from firestore. I've also checked #1652 and #2374 which are almost the same as this problem.

Has anyone faced this issue before? Would appreciate any help

Hung Tran · Accepted Answer · 2019-10-11 02:38:04Z

1

You shouldn't rely on firestore or firebase to start a test because it's an external service that you have no control over especially

when are these firestore requests sent?
what are these requests for?
how do they work?

If we don't understand, we cannot expect Cypress knows what's going on because it's a framework.

Instead, you can just wait for a specific component to be available. By default, the cy.get command has a built-in timeout. It'll wait for the given component to be rendered before failing a test.

In your case, you can increase the timeout of the very first cy.get which, I think, in deleteEvent(). In addition, you need get rid of all cy.server & cy.wait for firestore which are unreliable and useless.

edited Oct 11, 2019 at 2:38

answered Oct 11, 2019 at 2:32

Hung Tran

1,6652 gold badges18 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dagobert Renouf Over a year ago

great answer, it helped me fix a lot of flakiness in my tests.

Collectives™ on Stack Overflow

Testing react app with cypress and firestore shows Timed out retrying: cy.wait()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related