fix: add tests for React 18, bump peerDeps

[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

Add support for React 18 to npm/react.

Additional details

• updated peerDependencies to allow installing @cypres/react with react@18
• some specific code in vite and webpack dev servers to account for the potentially not-available react-dom/client code

Since React projects on <= 17 do not have react-dom/client, I did a dynamic import:

if (react!8) {
  import('react-dom/client').then(/* mount component */).catch(...)
}

This is valid in regular ESM, but both webpack and vite are NOT regular ESM... Vite does pre-optimizating, and webpack has it's own require function.

My solution:

1. vite plugin to ignore the missing react-dom/client request if the user is not on react 18
2. add react-dom/client as externals for React <= 17 projects. Then we can catch the error, instead of webpack failing to compile due to a missing module.

I cannot get the system-tests to work with React 18, but I did build the binary and test it out - seems like it's working as expected.

Many other libs have this problem, eg storybook who solves this with IngorePlugin for webpack: https://github.com/storybookjs/storybook/pull/17215/files#diff-bc92d51dd98fe78ac7c9251c1b8d10d45bdfc8b872be68c12ace18f783205fd7R16-R18.

Another solution would be remove the react-dom/client dependency, maybe with https://webpack.js.org/plugins/normal-module-replacement-plugin/, but I cannot get this to work, either. I think the problem is that cypress/react is NOT a module, but just some inline code we bundle in node_modules/cypress, but I'm not really sure.

Either way, I think we need React 18 support soon, and this seems to be the best solution, other than creating cypress/react18, which is not really ideal.

Another solution might be having cypress/react18 in the binary, and dynamically replacing cypress/react with a webpack or Vite plugin under the hood. cc @JessicaSachs, thoughts?

Steps to test

How has the user experience changed?

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.

[cypress]

---

Test summary

37552 • 1 • 454 • 0 • 5

---

Run details

Project	cypress
Status	Failed
Commit	a36e2de
Started	Jun 17, 2022 7:50 AM
Ended	Jun 17, 2022 8:08 AM
Duration	17:42 💡
OS	Linux Debian - 10.11
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Failures

	cypress/e2e/e2e/origin/commands/assertions.cy.ts		1
1	cy.origin assertions > #consoleProps > .should() and .and()

---

Flakiness

	commands/actions/click.cy.js		1
1	... > scroll-behavior > can scroll to and click elements in html with scroll-behavior: smooth
	commands/net_stubbing.cy.ts		1
1	network stubbing > waiting and aliasing > should handle aborted requests
	next.cy.ts		1
1	Working with next-12 > should detect new spec
	cypress/proxy-logging.cy.ts		2
1	Proxy Logging > request logging > xhr log has response body/status code when xhr response is logged second
2	Proxy Logging > request logging > xhr log has response body/status code when xhr response is logged second

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[lmiller1990]

This is a bit of a hack. Since we cannot assume react-dom/client exists, we import it using a dynamic import: https://github.com/cypress-io/cypress/pull/22334/files#diff-deaf32d610fd1088b9d1a39d5b49198b98fcaba2d2b1b8942df73ed9961551e0R142

import('does-not-exist').then(...).catch(...)

This works fine for "real" ESM, but webpack is not real ESM, but it's own implementation - it does analysis of all modules, including dynamic imports, and will error.

To tell webpack NOT to do this, we can just add it as an external - then webpack will assume it exists at runtime. We can now catch the error!

Unfortunately, this does not seem to work how you'd expect during tests - possibly due to how we use symlinks, or the fact that we ship our module is a kind of weird way (inline inside of node_modules/cypress.

Storybook solves this differently, using IgnorePlugin: https://github.com/storybookjs/storybook/pull/17215/files#diff-bc92d51dd98fe78ac7c9251c1b8d10d45bdfc8b872be68c12ace18f783205fd7R16-R18

But I could not get this to work, I am not sure why - possibly due to the weird way we bundle cypress/react.

[lmiller1990]

In favor of #22437 for now.