feat: React 18 support

[lmiller1990]

• Closes Cypress Testing fails to build on React version 18 #21381
• Closes React 18 support - today logs a bunch of warnings for ReactDom.render being deprecated #21946

User facing changelog

Include a cypress/react18 library to support React 18 in component testing.

Additional details

Brief: (Cypress team only): https://github.com/cypress-io/tech-briefs/tree/main/briefs/cy-mount-library-versioning

In the next major version of Cypress, cypress/react will support the main version of React on npm - that is, 18, at least right now. Until then, React 18 users can opt in to use our React 18 adapter via import { mount } from 'cypress/react18'.

I refactored the npm/react code so we can share it across multiple React adapters. The main files you'll want to review are npm/react. The react 18 adapter code is the most interesting - you can see how 99% of the React adapter code is shared. cypress/react18 just injects the React 18 specific code. I like this pattern, it should let us create more React adapters if we need them in the future (or maybe even a Next.js specific adapter, should the need arise).

The bulk of the changes here are to tests - previously, we would cache a single React version for all system tests, to save time installing it each time. Now we support different versions of React with non-compatible mounting APIs, we need to make sure all the test projects using React correctly declare their React version.

Steps to test

I've added some tests. You could just run the React 18 test. It's here: https://github.com/cypress-io/cypress/pull/22876/files#diff-43b08f660ee024cc300876efc9942e863a03f097cf3ae13d9dfece74bc11896eR1

I'll add a pre-release binary to test more. Scroll down and grab it.

Testing:

npm init react-app cra18-app
# install binary
npx cypress open
# follow steps

Once you did that, make a test:

import App from './App'

describe('ComponentName.cy.jsx', () => {
  it('playground', () => {
    cy.mount(<App />);
  })
})

You'll see a warning in your console. You're using cypress/react. Update supportFile:

import './commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')

import { mount } from 'cypress/react18'

Cypress.Commands.add('mount', mount)

Now it works, no warning.

We will update launchpad to scaffold the correct import at a later date, just focusing on getting a react adapter shipped for now.

How has the user experience changed?

Not warning when mounting React 18 - right now cypress/react is designed for React 17, and you get a warning in the console.

PR Tasks

• Have tests been added/updated?
• Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
• Has a PR for user-facing changes been opened in cypress-documentation?
• Have API changes been updated in the type definitions?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[lmiller1990]

So CT team can test the binary - most of the team is on mac.

[astone123]

@lmiller1990 After setting up my React 18 CRA project with the CT wizard, my component.js file looks like this

import { mount } from 'cypress/react'

Cypress.Commands.add('mount', mount)

Should I expect this import to be cypress/react18 since I'm using React 18 in the project? I don't see any errors in the console though.

[lmiller1990]

@astone123 right, I wonder if we want to update launchpad to scaffold cypress/react18 by default for React 18 projects. I think this makes sense.

You should definitely see the warning in the console, though. That's strange. I will check.

[ZachJW34]

Suggested change

	"@types/react": "^16.9.16 || ^17.0.0",
	"@types/react": "^18.0.0",

[ZachJW34]

Should we update react deps to 18 for this package? Not sure if these are really even used...

[lmiller1990]

I can try but I think this messes up the monorepo dependencies since Lerna hoisting is not perfect. This dependency is not used at all (we grab their React version) but would be nice to have the correct deps if we can.

[lmiller1990]

Not really used but going to update it anyway!

[ZachJW34]

Tested with the binary, looks good! Just a few nitpicks, going to ✅

[astone123]

Looks good. I spun up a React 18 project using CRA and made a small test using cypress/react18. No ReactDOM error 👍🏻

Disregard my earlier comment... I wasn't seeing the error when using cypress/react because my test wasn't actually mounting anything 🤦🏻‍♂️

[astone123]

@astone123 right, I wonder if we want to update launchpad to scaffold cypress/react18 by default for React 18 projects. I think this makes sense.

Yeah I think we should make an issue to update launchpad for this

[lmiller1990]

@astone123 issue for launchpad #22890

[lmiller1990]

Vite/Webpack passing, just some weird Percy API error blocking them from going green. Merging!

[cypress-bot]

Released in 10.4.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v10.4.0, please open a new issue.