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

breaking: remove support for React 16 and 17 for Cypress Component Testing. Additionally, remove the cypress/react18 testing harness and merge it upstream with cypress/react #30590

Conversation

AtofStryker
Copy link
Contributor

@AtofStryker AtofStryker commented Nov 8, 2024

Additional details

Updates cypress/react to be the cypress/react18 test harness and removes support for react 16 and 17 for component testing. Since the cypress/react18 test harness is merged upstream into cypress/react, the cypress/react18 harness is no longer shipped with the binary and the cypress/react18 package will be deprecated when we release cypress 14 (a part of the release checklist)

most of the system test updates to react 18 happened in #30614 to make this PR smaller. The only changes here should be to reference the merged upstream harness, cypress/react

Steps to test

How has the user experience changed?

Test examples in the react test harness have been updated to use functional components and hooks (except 1 until react class components are completely removed)

You can also test migration via the binary 34043f9

  • what does migration look like for react 18 users?
    When users try to start their tests using the cypress/react18 test harness, the tests errors with cypress/react18 is not exported from cypress:
Screenshot 2024-11-15 at 9 45 43 AM

Updating cypress/react18 to cypress/react resolves the issue
Screenshot 2024-11-15 at 9 45 58 AM

  • what does migration look like for react 17 and under users?
    Users are initially warned on the launchpad that the version is not compatible
Screenshot 2024-11-15 at 9 55 22 AM

When starting Component testing with the new cypress/react harness, an error throughs that react-dom/client cannot be found
Screenshot 2024-11-15 at 9 55 37 AM

downloading @cypress/react@8 and changing the mount function from cypress/react to @cypress/react allows the tests to run
Screenshot 2024-11-15 at 9 56 05 AM

PR Tasks

@AtofStryker AtofStryker changed the base branch from develop to chore/update_react_18 November 8, 2024 17:45
Copy link

cypress bot commented Nov 8, 2024

cypress    Run #58448

Run Properties:  status check passed Passed #58448  •  git commit 90da84a3b5: update tests / suggestions from code review [run ci]
Project cypress
Branch Review breaking/remove_react_16_17_merge_react18_harness_upstream
Run status status check passed Passed #58448
Run duration 16m 59s
Commit git commit 90da84a3b5: update tests / suggestions from code review [run ci]
Committer AtofStryker
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 28
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 764
View all changes introduced in this branch ↗︎
UI Coverage  66.27%
  Untested elements 26  
  Tested elements 55  
Accessibility  96.21%
  Failed rules  0 critical   4 serious   1 moderate   0 minor
  Failed elements 199  

@AtofStryker AtofStryker force-pushed the breaking/remove_react_16_17_merge_react18_harness_upstream branch 8 times, most recently from 314c3f4 to 1f8d370 Compare November 13, 2024 15:00
Base automatically changed from chore/update_react_18 to release/14.0.0 November 14, 2024 00:45
@AtofStryker AtofStryker force-pushed the breaking/remove_react_16_17_merge_react18_harness_upstream branch from 1f8d370 to e253a15 Compare November 14, 2024 01:08
@AtofStryker AtofStryker changed the base branch from release/14.0.0 to chore/update-tests-prep-react-18-ct-update November 14, 2024 01:08
@AtofStryker AtofStryker self-assigned this Nov 14, 2024
@AtofStryker AtofStryker added npm: @cypress/react @cypress/react package issues npm: @cypress/react18 @cypress/react18 package issues Cypress 14 Issues scoped for Cypress 14 type: breaking change Requires a new major release version labels Nov 14, 2024
@AtofStryker AtofStryker force-pushed the chore/update-tests-prep-react-18-ct-update branch from 04b374f to cbdb33a Compare November 14, 2024 02:14
@AtofStryker AtofStryker force-pushed the breaking/remove_react_16_17_merge_react18_harness_upstream branch from e253a15 to b4337a2 Compare November 14, 2024 02:15
@AtofStryker AtofStryker force-pushed the breaking/remove_react_16_17_merge_react18_harness_upstream branch from b4337a2 to 9eb53bc Compare November 14, 2024 14:23
Base automatically changed from chore/update-tests-prep-react-18-ct-update to release/14.0.0 November 14, 2024 21:12
@AtofStryker AtofStryker force-pushed the breaking/remove_react_16_17_merge_react18_harness_upstream branch from 9eb53bc to 1fb7109 Compare November 14, 2024 21:16
@AtofStryker AtofStryker requested a review from mschile November 14, 2024 21:16
import React from 'react'
import ReactDOM from 'react-dom'
import major from 'semver/functions/major'
import ReactDOM from 'react-dom/client'
Copy link
Contributor Author

Choose a reason for hiding this comment

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

copied over from cypress/react18

@AtofStryker AtofStryker force-pushed the breaking/remove_react_16_17_merge_react18_harness_upstream branch 2 times, most recently from 25fde00 to 52061c7 Compare November 14, 2024 21:36
…d move cypress/react18 upstream into cypress/react [run ci]
@AtofStryker AtofStryker force-pushed the breaking/remove_react_16_17_merge_react18_harness_upstream branch from 52061c7 to 34043f9 Compare November 14, 2024 21:38
*/
export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerenderKey?: string) {
if (major(React.version) === 18) {
const message = '[cypress/react]: You are using `cypress/react`, which is designed for React <= 17. Consider changing to `cypress/react18`, which is designed for React 18.'
Copy link
Contributor Author

Choose a reason for hiding this comment

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

no longer need this as we only support 18 and up

@@ -1,98 +0,0 @@
# Enzyme examples

This folder shows several examples from [Enzyme docs](https://enzymejs.github.io/enzyme/).
Copy link
Contributor Author

Choose a reason for hiding this comment

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

enzyme example tests are deleted since enzyme is no longer maintained

@AtofStryker AtofStryker marked this pull request as ready for review November 15, 2024 14:59
@AtofStryker AtofStryker requested a review from mschile November 15, 2024 15:23
@AtofStryker AtofStryker requested a review from mschile November 15, 2024 16:28
@AtofStryker AtofStryker merged commit 0c661b4 into release/14.0.0 Nov 15, 2024
125 of 128 checks passed
@AtofStryker AtofStryker deleted the breaking/remove_react_16_17_merge_react18_harness_upstream branch November 15, 2024 21:14
@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 npm: @cypress/react18 @cypress/react18 package issues type: breaking change Requires a new major release version
Projects
None yet
2 participants