Large increase in random CI failures using Cypress after upgrading to react-router v7

[pjg]

I'm using React Router as a...

library

Reproduction

There are no reproduction steps. Just an observation. Looking at video of failures, and corresponding code, it looks like a race condition during clicking. The code failing looks similar to this (in various places):

cy.contains('Text').should('exist')
cy.get('.class a').first().click()

The link is on the same page as the text. What happens is that Cypress executes the click, but react-router does not transition to the new path, like the click never happened.

I'm posting this mainly to see if I'm alone with this.

System Info

react-router v7.1.4
cypress v14.0.1

Used Package Manager

npm

Expected Behavior

Not seeing random test failures.

Actual Behavior

Seeing random test failures.

[timdorr]

Does it transition to the new page if you add some wait time to the test?

We use startTransition between navigations, so this introduces potentially async behavior to rendering. You may either need to wait a tick for the render to finish or have some way to wait for the render to finish before checking the DOM state. That may depend on how you have the test renderer hooked up and what libraries you use to do that.

[pjg]

It's hard to tell as the failures are very random across the whole test suite. I use cypress, and it has some waiting mechanisms built-in, so that there's no need to manually wait. Though they seem to fail occasionally when dealing with react-router v7. I'll keep investigating though.