cypress: Cypress Testing fails to build on React version 18
Current behavior
Hey guys, we’ve encountered an error that is disrupting our build pipeline 😦 (oh no!)
Currently Cypress only allows react 16 in the package.json. These days some other packages require at least React 18, making this Cypress tester incompatible with those packages. When installing this with pnpm, or another package manager, warnings about incompatible react versions cause builds to fail, disrupting the build pipeline.
PNPM:
WARN Issues with peer dependencies found
.
└─┬ @cypress/react
├── ✕ unmet peer @types/react@"^16.9.16 || ^17.0.0": found 18.0.8
├── ✕ unmet peer react@"^=16.x || ^=17.x": found 18.1.0
└── ✕ unmet peer react-dom@"^=16.x || ^=17.x": found 18.1.0
We were able to get past this by ignoring all warnings, and errors, but obviously this is not something we want to do.
Turns out, from our testing it a bit, Cypress seems to work just fine with React 18 (after ignoring the errors and just running everything manually). But we didn’t have time to test it extensively yet.
From doing some research it seems like the biggest bottleneck comes from the Enzyme package being limited at React 16. And this package is not getting many updates these days.
Desired behavior
We should be able to run Cypress on react 18.
We should look into migrating away from Enzyme, if possible. Potentially to rely on React Testing Library.
Test code to reproduce
Following this official getting-started guide produces the failure state.
https://www.cypress.io/blog/2021/04/06/cypress-component-testing-react/
Using pnpm, and installing the missing peer dependencies, you will reach a request saying
WARN Issues with peer dependencies found
.
└─┬ @cypress/react
├── ✕ unmet peer @types/react@"^16.9.16 || ^17.0.0": found 18.0.8
├── ✕ unmet peer react@"^=16.x || ^=17.x": found 18.1.0
└── ✕ unmet peer react-dom@"^=16.x || ^=17.x": found 18.1.0
If you downgrade react to react 16, then other packages start failing. It becomes difficult to find a golden package configuration that meets everything.
Cypress Version
Cypress package version: 9.6.0
Other
Cypress package version: 9.6.0 Cypress binary version: 9.6.0 Electron version: 15.5.1 Bundled Node version: 16.5.0
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 7
- Comments: 20 (12 by maintainers)
Anyone following this: still working on a production grade, bullet proof solution, hoping to have it in the next release. We may end up going with
cypress/react18etc, for reliability and scalability - moving forward, we’d then havecypress/react19for v19, etc.It’s merged https://github.com/cypress-io/cypress/pull/22876. It will be in the next release, 10.4.0. We release on a biweekly cadence, so it should be soon. You will need to change your import to
cypress/react18to get the React 18 adapter.Most likely
cypress/reactwill default to React 18 in the next major Cypress release, Cypress 11, which would be a breaking change, which is why it’ll wait for the next major.So, for now, it’s an opt in feature.
@elijahstorm excellent, thanks. I think all the major blockers are solved, going to get the PR (#22437) reviewed this week. In the meantime I will build a pre-release binary and post it here for some early testing - this will definitely help with getting this into production faster.
Is there a public roadmap for Cypress 10.0? I see another discussion about component testing roadmap https://github.com/cypress-io/cypress/discussions/20507 and several mentions in issues like https://github.com/cypress-io/cypress/issues/21505#issuecomment-1128392687, but no mention of 10.0 features on https://docs.cypress.io/guides/references/roadmap#Upcoming-features
HI @elijahstorm, Thanks for logging this. We are tantalizingly close to releasing the new component testing workflow with Cypress 10.0. After the 10.0 has been released we will revisit your issue and determine if it is still relevant post release.
I’ve same happened. I need to React 18!
@mjhenkes Could you tell me about this issue fix plans here? 🙏🏻
@mjhenkes Is it possible to at least, for the time being, add React 18 to the peerDependencies listed for @cypress/react so that people upgrading to React 18 are not stuck having to install legacy peer dependencies or getting npm install errors?