Different behaviour on CI vs local during Cypress testing

[andreighh]

Hello everyone, I would really appreciate some help with this issue, thank you.

I'm using @tanstack/react-query to fetch options for an antd dropdown and cypress to test that the options are actually loaded and displayed. I'm using infinite staleTime and cacheTime.

Locally, I have no issues as I intercept the call, visit the page and check the response

cy.intercept("GET", "/api/countries/").as("getCountries");
cy.visit("/");
cy.wait("@getCountries").should((interception) => {
  expect(interception.response.body).to.be.an("array").and.have.length(253);
});

then I click on the dropdown and check that the option exists

cy.get(".ant-select-selector").scrollIntoView().should("be.visible");
cy.get(".ant-select-selector").click({ force: true });
cy.get(".ant-select-item[title='Albania']").should("be.visible");

On the CI, the select is in a permanent loading state, because the options are being refetched

---

Just to test, I added two extra waits for the options request, so the code above is now

cy.get(".ant-select-selector").scrollIntoView().should("be.visible");
cy.get(".ant-select-selector").click({ force: true });
cy.wait("@getCountries");
cy.wait("@getCountries");
cy.get(".ant-select-item[title='Albania']").should("be.visible");

Locally, the test fails, because there's no second request for the options

On the CI, the test fails because the dropdown is in a loading state again

As you can see, it waited for two extra requests (getCountries has a 3 in the badge), but another two requests are being made so the dropdown is still in a loading state.

---

The only difference between my local machine and the CI is that my local machine is much faster, docker containers are used for both.

---

Package versions:

• react 18.2.0
• antd 4.24.6
• @tanstack/react-query 4.20.4
• cypress 12.2.0

[andreighh]

I solved this, I switched to using swr and it error-ed out instead of loading permanently. That lead me to see that it is a CORS issue in the testing environment.

What I believe was happening is that react-query retried the query faster than the cypress timeout, but it doesn't make sense why there were so many retries and why the select was in a permanent loading state.

Also, cypress can somehow access the body of the request with wrong CORS, otherwise I don't understand how the checks passed.