search

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
47.09k stars 3.19k forks source link

feat: support React 19 for Cypress Component Testing #30651

Closed AtofStryker closed 17 hours ago

AtofStryker commented 2 days ago

Additional details

Adds React 19 (Not yet officially released) and React 19 Release Candidate support to component. This PR is prematurely supporting React 19 for Component testing as we do not anticipate massive release candidate API changes with React 19. React 19 Release Candidate support is also needed to support Next 15 (not 15 RC, but actual 15).

Testing the build binaries works as expected against a sample React 19 project. This works OOTB since the ReactDOM.render() changes merged upstream into cypress/react in #30590, so no custom test harness is needed 🎉

Using the React 19 RC today with Cypress 13x

Since React 19 is not supported today, framework detection does not work correctly and scaffolded dependencies are not satisfied

Screenshot 2024-11-19 at 1 14 09 PM Screenshot 2024-11-19 at 1 14 18 PM Screenshot 2024-11-19 at 1 14 23 PM Screenshot 2024-11-19 at 1 14 31 PM Screenshot 2024-11-19 at 1 14 38 PM

The cypress/react test harness also does not work as ReactDOM.render() was removed in React 19. The user can use cypress/react18 to get this to work, but that is not obvious.

Screenshot 2024-11-19 at 1 14 59 PM

Using the React 19 RC on this branch

Dependencies are automatically detected and satisfied. This is partially due to use detecting the release candidate, which I think we can announce we will remove once React 19 is officially released without releasing a breaking change. This requires further discussion

Screenshot 2024-11-19 at 1 24 26 PM Screenshot 2024-11-19 at 1 24 36 PM Screenshot 2024-11-19 at 1 24 51 PM

The cypress/react test harness works with 19 naturally because it uses the rendering methods used by react 18, which is root.render() from the ReactDOM/client package so no change is necessary

Screenshot 2024-11-19 at 1 15 23 PM

Steps to test

Highly recommend setting up a sample React 19 project. This is likely easiest with setting up a React project with Vite and then updating the React dependencies following this guide.

How has the user experience changed?

Users can now use Cypress Component Testing with React 19 in Cypress 14

PR Tasks

cypress[bot] commented 2 days ago

cypress    Run #58529

Run Properties:  status check passed Passed #58529  •  git commit cd07b42d6c: feat: support react 19 for component testing with cypress/react [run ci]
Project cypress
Branch Review feat/support_react_19
Run status status check passed Passed #58529
Run duration 17m 44s
Commit git commit cd07b42d6c: feat: support react 19 for component testing with cypress/react [run ci]
Committer AtofStryker
View all properties for this run ↗︎
Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 4
Tests that did not run due to a developer annotating a test with .skip  Pending 1103
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 15855
View all changes introduced in this branch ↗︎

[!WARNING]

No Report: Something went wrong and we could not generate a report for the Application Quality products.