Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support React 19 for Cypress Component Testing #30651

Merged
merged 1 commit into from
Nov 21, 2024

Conversation

AtofStryker
Copy link
Contributor

@AtofStryker AtofStryker commented Nov 19, 2024

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

Copy link

cypress bot commented Nov 19, 2024

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.

@AtofStryker AtofStryker force-pushed the feat/support_react_19 branch from f6b67a2 to e1d3d55 Compare November 20, 2024 01:47
@AtofStryker AtofStryker force-pushed the feat/support_react_19 branch from e1d3d55 to cd07b42 Compare November 20, 2024 01:55
@AtofStryker AtofStryker linked an issue Nov 20, 2024 that may be closed by this pull request
@AtofStryker AtofStryker changed the title feat: support react 19 for Cypress Component Testing feat: support React 19 for Cypress Component Testing Nov 20, 2024
@@ -32,11 +32,11 @@
"vite-plugin-require-transform": "1.0.12"
},
"peerDependencies": {
"@types/react": "^18",
"@types/react-dom": "^18",
"@types/react": "^18 || ^19",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these peer dependencies are slightly off since they don't match the release candidate semver, which is not a problem with the shipped binary but could cause problems if someone is trying to install @cypress/react with the react 19 release candidate. I don't see anyone actually needing to do this, and especially since React 19 isn't officially released yet, I am hesitant to make the change here.

@AtofStryker AtofStryker self-assigned this Nov 20, 2024
@AtofStryker AtofStryker marked this pull request as ready for review November 20, 2024 14:38
@AtofStryker AtofStryker added npm: @cypress/react @cypress/react package issues Cypress 14 Issues scoped for Cypress 14 type: feature New feature that does not currently exist labels Nov 20, 2024
@AtofStryker AtofStryker merged commit 94d360e into release/14.0.0 Nov 21, 2024
119 of 121 checks passed
@AtofStryker AtofStryker deleted the feat/support_react_19 branch November 21, 2024 15:17
@jennifer-shehane jennifer-shehane mentioned this pull request Dec 3, 2024
28 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Cypress 14 Issues scoped for Cypress 14 npm: @cypress/react @cypress/react package issues type: feature New feature that does not currently exist
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support React 19 in Component Testing
2 participants