Seed `react18` for new React 18 projects

[lmiller1990]

What would you like?

Cypress ships support for React 18 under cypress/react18. When you set up Cypress with a React project using the launchpad, it seeds import { mount } from 'cypress/react' in your supportFile, which isn't really ideal.

We should detect the React version and give them the correct mounting function.

React <= 17

import { mount } from 'cypress/react'

React 18

import { mount } from 'cypress/react18'

The code for generating the supportFile is here.

To see an example of the code we generate, the easiest way is to make a new React app and add Cypress!

• create with Vite: yarn create vite react-app --template react
• go in there and install deps
• commit your changes
• install cypress from prod: yarn add cypress --dev
• yarn cypress open
• choose component testing
• follow prompts
• git status and see what was generated (all inside cypress.
  • Notice cypress/support/component.js does import { mount } from 'cypress/react'.
  • Ideally we should detect if they are using React 18 (this template does) and do import { mount } from 'cypress/react18').

Why is this needed?

It's useful to seed the the correct mounting function that corresponds to the React version so the test code matches the production code, which would be using the new createRoot API from react-dom/client.

Other

No response