Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cypress stuck on Your tests are loading after upgrade #27769

Closed
epacke opened this issue Sep 7, 2023 · 13 comments
Closed

Cypress stuck on Your tests are loading after upgrade #27769

epacke opened this issue Sep 7, 2023 · 13 comments

Comments

@epacke
Copy link

epacke commented Sep 7, 2023

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
Copy link

muratkeremozcan commented Sep 7, 2023

+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
Copy link

audriusnavickasDB commented Sep 8, 2023

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
Copy link
Contributor

nagash77 commented Sep 8, 2023

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

@SquirrelCoder
Copy link

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
Copy link
Collaborator

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
Copy link
Author

epacke commented Sep 8, 2023

Oh darn, let me fix that!

@epacke
Copy link
Author

epacke commented Sep 8, 2023

I pushed the latest code now. Apologies!

@mschile
Copy link
Contributor

mschile commented Sep 9, 2023

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
Copy link
Contributor

mschile commented Sep 9, 2023

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
Copy link
Contributor

mschile commented Sep 9, 2023

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
Copy link
Author

epacke commented Sep 9, 2023

That did it. Thanks a bunch!

@epacke epacke closed this as completed Sep 9, 2023
@ryanthemanuel
Copy link
Collaborator

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

@muratkeremozcan
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants