Rework npm/react/src/plugins/* to use system-tests

[sync-by-unito[bot]]

Summary

Like the https://cypress-io.atlassian.net/browse/UNIFY-1264, we also have some “framework specific” dev servers. These are built on the two core dev servers, Webpack and Vite, but add some framework specific modifications (eg, Next.js works a little differently to Create React App and Vue CLI).

These will be new packages in npm.

Brian made a spike branch showing how this might look. It moves react-scripts to it’s own package.

Acceptance Criteria

• Should create new packages in npm:
  • @cypress/nextjs-dev-server
  • @cypress/craco-dev-server
  • @cypress/react-scripts-dev-server
• The above packages should be populated with code from npm/react/src/plugins
  • Please move these to TypeScript as you go
• Do not run the nextjs an react-scripts as part of npm/react in circle.yml. Instead, these can be their own steps, or just part of the system-tests step if the adapters don’t need any unit tests.
• Move relevant test projects from npm/react/examples to system-tests
• This PR might be big due to the large amount of files in the example projects; you could consider making two PRs, one that moves the examples, and one that does the actual dev-servers

Resources

Plan

This spike branch moving react-scripts-dev-server to its own package might be useful. Look at the detailed commit message.

Open Pull Requests

Any PRs needed for review

┆Issue is synchronized with this Jira Task by Unito ┆author: Lachlan Miller ┆epic: Testing / Quality ┆friendlyId: UNIFY-1265 ┆priority: Low ┆sprint: Backlog ┆taskType: Task

[sync-by-unito[bot]]

➤ Jess Sachs commented:

I took a crack at moving some of the examples, but it took a long time. I think making multiple PRs that move some of the examples over is a good idea. There’s 19 examples in total, and doing the first 2 (react-a11y and react-tailwind) took me about 3-4 hours because the feedback loop trying to get the correct versions of package dependencies can be a bit slow…

https://github.com/cypress-io/cypress/pull/20578

There’s one subtask for each example project to move over.

Some of them may already have coverage, in which case the only change to make is to assert that there is coverage and then deleting the old npm/react/examples/* folder.

[sync-by-unito[bot]]

➤ Chris Baus commented:

According to Zach Williams most of these child issues are out of scope for 10.0

[rockindahizzy]

Closing in favor of https://github.com/cypress-io/cypress/issues/21965