Cypress Testing fails to build on React version 18

[elijahstorm]

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

[mjhenkes]

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.

[marcindulak]

Is there a public roadmap for Cypress 10.0? I see another discussion about component testing roadmap #20507 and several mentions in issues like #21505 (comment), but no mention of 10.0 features on https://docs.cypress.io/guides/references/roadmap#Upcoming-features

[reintroducing]

@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?

[eevargas]

@reintroducing Using --force seems to work, i have others errors, but not @cypress/react related
npm install --save-dev cypress @cypress/react @cypress/webpack-dev-server --force

[reintroducing]

@eevargas yesh the install will work with that or the legacy peer deps override but I’m trying to upgrade a few repos/libraries and don’t want to have to update install directions for all of them just to accommodate this. Adding it to the peer deps in this library seems the most logical as that will be the future version anyway so was hoping to get it added. React 18 has been out for a while now so was surprised to see it not being here.

[lmiller1990]

I will look at React 18 support asap. It's been out for a while and should be pretty straight forward - I know they have some new stuff for concurrent mode, but I don't think we need support for that out of the gate - just updating the peer deps and adding some internal tests to make sure React 18 works should be good enough for now.

[lmiller1990]

Related: #21946

I am working on this here #22334. Seems like it should be a pretty quick one. I want to use Cypress with React 18.

[ninezero90hy]

I've same happened. I need to React 18!

@mjhenkes Could you tell me about this issue fix plans here? 🙏🏻

[lmiller1990]

The plan is to support React 18 very soon once this lands: #22437 which from what I can see only has 1 legitimate failing test. I will fix this in the next day or two.

It's a bit more complex than I thought since we use a single lib, cypress/react, for all React versions, and we bundle it in with Cypress. Would anyone be interested in testing a pre-release before this hits npm (which would be in the next release cycle, normally every 2 weeks).

[elijahstorm]

@lmiller1990 I wouldn't mind testing it out if it would be helpful.

[lmiller1990]

@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.

[lmiller1990]

Ok, PR is good to go, will get it reviewed and shipped: #22437

@elijahstorm or @ninezero90hy (or anyone else who wants this) If you are on linux, I built a pre-release #22437 (comment) (valid for 48 hours).

If you need macOS I can look into getting that built. Please let me know.

[elijahstorm]

If you need macOS I can look into getting that built. Please let me know.

Sorry for the extra work, but I'm on a MacOS. Thank you for the work. I look forward to testing it.

[lmiller1990]

@elijahstorm you can get Darwin and arm64 macOS builds here: 6184309#comments

I tested it out on my m1 (under darwin) with React 18, working for me. Let me know how it goes for you. 🙏

[elijahstorm]

@lmiller1990
I can't track down this error myself, hopefully you have a bit more expertise. But running Cypress with 6184309 is failing with this error. When running command line and when running with the Cypress GUI.

     TypeError: Cannot read properties of undefined (reading 'match')
      at getMajorVersion (http://localhost:3000/__cypress/src/node_modules/.vite/deps/cypress_react.js?v=ca44aa1a:267:22)
      at http://localhost:3000/__cypress/src/node_modules/.vite/deps/cypress_react.js?v=ca44aa1a:283:26
      at step (http://localhost:3000/__cypress/src/node_modules/.vite/deps/cypress_react.js?v=ca44aa1a:107:19)
      at Object.next (http://localhost:3000/__cypress/src/node_modules/.vite/deps/cypress_react.js?v=ca44aa1a:54:14)
      at fulfilled (http://localhost:3000/__cypress/src/node_modules/.vite/deps/cypress_react.js?v=ca44aa1a:25:24)

[lmiller1990]

Hmm @elijahstorm interesting, I guess semver is undefined here: https://github.com/cypress-io/cypress/pull/22437/files#diff-7031da07fd51256fb2dc14db39454b4e8ec0f8f90ab283511c2bf847e790eeadR82

Perhaps I need something like react.default?.version here: https://github.com/cypress-io/cypress/pull/22437/files#diff-deaf32d610fd1088b9d1a39d5b49198b98fcaba2d2b1b8942df73ed9961551e0R59

I will try to reproduce this. Are you able to share a minimal repo by any chance?

[lmiller1990]

Edit: I reproduced! Let me debug. I wonder if Vite changed something recently that broke this, they are preparing for 3.x soon.

@elijahstorm should be good now... keep an eye on this commit, the latest macOS and linux builds should appear: 395743a

[lmiller1990]

New builds are up. 395743a

[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 #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.