Cypress stuck on Your tests are loading after upgrade

[epacke]

Current behavior

I'm trying to bump cypress version from 9.5.2 to 13.1.0 and followed the upgrade guide (renaming files from .spec.ts to .cy.ts etc).

When I launch cypress and try to start an e2e test it gets stuck at "Your tests are loading".
Tests worked in 9.5.2.

Desired behavior

Ideally the tests would run :)

Test code to reproduce

I created a branch and pushed the code there:
https://github.com/net-utilities/BigIPReport/tree/Bumping-cypress

To reproduce you can:

1. Check out the branch
2. Start the app by running npm run start (optional, Cypress gets stuck anyhow)
3. The start cypress with npx cypress open
4. Pick E2E Testing
5. Start in Chrome
6. Click on ie. direct-links
7. Cypress is stuck in "Your tests are loading..."

Cypress Version

13.1.0

Node version

v18.16.0

Operating System

macOS 13.5.1

Debug Logs

cypress-debug.log

Other

I do not run any security software at the moment to remove that from the equation.
I have tried to restart the computer just to be sure.

[muratkeremozcan]

+1

Reproduced in a large repo: 400+ CyCT examples.

In CI it hangs in some of the machines. If you have a small test suite, perhaps you can get away without seeing the hang.

Locally, running headless it will hang half way through a large test suite.

In open mode, it will hang after switching a few tests, infinitely showing "Your tests are loading".

git clone https://github.com/muratkeremozcan/cypress-react-component-test-examples

cd cypress-react-component-test-examples

# uses node 16
nvm use

yarn install

yarn cy:run-ct-fast

# or in open mode, switch a few tests, you will see it eventually

yarn cy:open

The master branch has 12.17.4, working stably.
We also had the repo stable during v13 beta.

[audriusnavickasDB]

I and my team are facing the same issue as well. It is working fine on any 12.12.0+ version just fine, but when upgrading to 13.0.0+ it breaks down and we are seeing the same "Your tests are loading" screen and nothing is happening. Tried to investigate and found out that the main issue for us is that for baseUrl we use url with authentication. For example: https://admin:admin@anywebsite.com this would break everything. If the credentials are removed and plain url is used, everything just works fine.

As I see from the provided repo I assume there is such usage as well and it might be identical case. I had registered such issue for Firefox browser specifically a while back: #24236, but it had not much attention. Now it looks like now it affects all of the browsers :)

So just wondering if such syntax is not supported anymore by the Cypress and it is not documented anywhere or it is a serious bug :)

[nagash77]

Hi folks, I believe this is similar to this ticket that is open #27722. Sharing your debug logs would help us troubleshoot.

[SquirrelCoder]

We're experiencing the same issue, and our application uses Basic HTTP Auth with credentials sent in the standard HTTP 'Authorization' header. Everything works smoothly with Cypress 12, but when we upgraded to Cypress 13, we encountered a problem where the test just hangs indefinitely.

[ryanthemanuel]

Hi @epacke thanks for the repo. I'm wondering if there was something that didn't get pushed on the branch you linked to? I'm still seeing Cypress as 9.5.2: https://github.com/net-utilities/BigIPReport/blob/Bumping-cypress/package.json#L36

[epacke]

Oh darn, let me fix that!

[epacke]

I pushed the latest code now. Apologies!

[mschile]

Hi @muratkeremozcan 👋, I was able to reproduce your hang using your repro. We will be making changes to Cypress to address these hangs so they no longer occur but in the meantime you can make the following changes to prevent the hangs.

The EffectOnceComponent should not be returning a non-function for it's useEffect. It should be:

- useEffectOnce(() => alert("Hi"))
+ useEffectOnce(() => { alert("Hi") })

This was causing an error when unmounting the component that in turn caused Cypress to hang by not moving onto the next test.

The other issue was with this intercept. Instead of intercepting all requests, you can intercept the requests you are interested in:

- cy.intercept('GET', '*', { body: response }).as('axios-response')
+ cy.intercept('GET', 'http://api.openweathermap.org/**/*', { body: response }).as('axios-response')

After making these changes, I was able to run all of the component tests without any hangs.

[mschile]

Hi @epacke 👋, I took a look at your project and the issue doesn't appear to be related to Cypress 13 as I was able to reproduce it in earlier versions. The issue appears to be related to the typescript config. Can you try removing your baseUrl config and see if that resolves the issue?

[mschile]

Hi @audriusnavickasDB 👋, thanks for your investigation. We were able to reproduce your hang in v13 when setting the baseUrl to a url with authentication. We are currently working on a fix.

[epacke]

That did it. Thanks a bunch!

[ryanthemanuel]

@audriusnavickasDB I believe your issue will be fixed with: #27781

[muratkeremozcan]

Hi @muratkeremozcan 👋, I was able to reproduce your hang using your repro. We will be making changes to Cypress to address these hangs so they no longer occur but in the meantime you can make the following changes to prevent the hangs.

The EffectOnceComponent should not be returning a non-function for it's useEffect. It should be:

- useEffectOnce(() => alert("Hi"))
+ useEffectOnce(() => { alert("Hi") })

This was causing an error when unmounting the component that in turn caused Cypress to hang by not moving onto the next test.

The other issue was with this intercept. Instead of intercepting all requests, you can intercept the requests you are interested in:

- cy.intercept('GET', '*', { body: response }).as('axios-response')
+ cy.intercept('GET', 'http://api.openweathermap.org/**/*', { body: response }).as('axios-response')

After making these changes, I was able to run all of the component tests without any hangs.

Thanks for the suggestions. They worked.
muratkeremozcan/cypress-react-component-test-examples#792