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

[lmiller1990]

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/react18 etc, for reliability and scalability - moving forward, we’d then have cypress/react19 for v19, etc.

[lmiller1990]

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/react18 to get the React 18 adapter.

Most likely cypress/react will 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.