chore: update react in the reporter from 17.0.2 to 18.3.1 #30567

AtofStryker · 2024-11-06T23:39:23Z

Closes Update @packages/reporter from React 17.0.2 to 18.3.1 #30511

Additional details

Updates the Cypress Reporter from React 17.0.2 to 18.3.1. This PR does the minimum work to get the Cypress reporter on React 18.3.1, which just means updating the render methods. Other deprecations and issues are scoped to #30574.

Steps to test

How has the user experience changed?

PR Tasks

Have tests been added/updated?
Has a PR for user-facing changes been opened in cypress-documentation?
Have API changes been updated in the type definitions?

cypress · 2024-11-07T00:24:06Z

cypress Run #58225

Run Properties: Passed #58225 • 7a18bb25b8: chore: update to react 18 for the reporter from 17.0.2 to 18.3.1 [run ci]

Project	`cypress`
Branch Review	`chore/update_react_18`
Run status	`Passed #58225`
Run duration	`22m 15s`
Commit	`7a18bb25b8: chore: update to react 18 for the reporter from 17.0.2 to 18.3.1 [run ci]`
Committer	`AtofStryker`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`6`
Pending	`1327`
Skipped	`0`
Passing	`29332`
View all changes introduced in this branch ↗︎

UI Coverage `46.67%`
Untested elements	`187`
Tested elements	`168`

Accessibility `92.56%`
Failed rules	`3 critical` `8 serious` `2 moderate` `2 minor`
Failed elements	`895`

AtofStryker · 2024-11-07T13:33:24Z

packages/app/src/runner/reporter.ts

@@ -11,12 +11,6 @@ export function setInitializedReporter (val: boolean) {
  hasInitializeReporter = val
 }

-async function unmountReporter () {


this isn't used anywhere. Figured a good time to delete dead code as to unmount in react 18 we would need a root reference and I would rather avoid the complexity

AtofStryker · 2024-11-07T13:33:45Z

packages/app/src/runner/reporter.ts

@@ -56,11 +50,12 @@ function renderReporter (
    testFilter: specsStore.testFilter,
  })

-  window.UnifiedRunner.ReactDOM.render(reporter, root)
+  const reactDomRoot = window.UnifiedRunner.ReactDOM.createRoot(root)


see https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis

AtofStryker · 2024-11-07T13:52:07Z

packages/driver/cypress/support/utils.ts

-
-  const currentTestLog = findReactInstance(cy.$$('.runnable-active', top?.document)[0])
-
-  currentTestLog.props.model._isOpen = true


this no longer works (hence why we are waiting the LONG_RUNNING_THRESHOLD above).

The model does get updated in <Attempt/>, but the prop passed into <Collapsible/> in componentDidUpdate still says false, which seems like a bug.

Normally I would file an issue for this, but I would argue that waiting the full 2 seconds for the attempt to open is a better test since this is what the user would exactly experience and better tests our code, even though it adds a few seconds to each test leveraging this. We don't do this is many tests (maybe 7 tests total) so it seems fine.

AtofStryker · 2024-11-07T13:52:40Z

packages/reporter/src/main.tsx

@@ -154,8 +154,10 @@ declare global {
 if (window.Cypress) {
  window.state = appState
  window.render = (props) => {
-    // @ts-ignore
-    render(<Reporter {...props as Required<BaseReporterProps>} />, document.getElementById('app'))
+    const container: HTMLElement = document.getElementById('app') as HTMLElement


see see https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis. This render is used for cy-in-cy

… ci]

AtofStryker · 2024-11-07T13:58:10Z

packages/driver/cypress/e2e/e2e/dom_hitbox.cy.js

+    // Since updating the Reporter to React 18, this is no longer the case. The element looks to be rerendered
+    // and the previous reference detached. We will need to come up with a different way to test this.
+    // @see https://github.com/cypress-io/cypress/issues/30526.
+    ensureCorrectHighlightPositions('#button', true)


comment says it all 😅

AtofStryker · 2024-11-07T13:59:41Z

npm/react18/src/index.ts

@@ -53,6 +52,7 @@ export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerende
  // to wipe away any state
  cleanup()
  const internalOptions: InternalMountOptions = {
+    // @ts-expect-error


this has to do with a type mismatch now that exists in the root of the monorepo 🥴 . This will be addressed with #29607

AtofStryker · 2024-11-07T14:23:19Z

package.json

@@ -94,6 +94,7 @@
    "@octokit/auth-app": "6.0.3",
    "@octokit/core": "5.0.2",
    "@percy/cli": "1.27.4",
+    "@reach/dialog": "0.10.5",


for whatever reason this package is no longer getting hoisted. So when the runner tries to build the reporter, the package is missing. This puts it in the root of the repo so its available in both places as opposed to installing it in 2 places

AtofStryker changed the title ~~chore: update to react 18 for the reporter from 17.0.2 to 18.3.1~~ chore: update to react for the reporter from 17.0.2 to 18.3.1 Nov 6, 2024

AtofStryker force-pushed the chore/update_react_18 branch from 115fbe1 to 669fa5c Compare November 6, 2024 23:42

AtofStryker linked an issue Nov 7, 2024 that may be closed by this pull request

Update @packages/reporter from React 17.0.2 to 18.3.1 #30511

Closed

AtofStryker commented Nov 7, 2024

View reviewed changes

chore: update to react 18 for the reporter from 17.0.2 to 18.3.1 [run…

7a18bb2

… ci]

AtofStryker force-pushed the chore/update_react_18 branch from 669fa5c to 7a18bb2 Compare November 7, 2024 13:57

AtofStryker commented Nov 7, 2024

View reviewed changes

AtofStryker self-assigned this Nov 7, 2024

AtofStryker commented Nov 7, 2024

View reviewed changes

AtofStryker marked this pull request as ready for review November 7, 2024 14:24

AtofStryker requested review from cacieprins and ryanthemanuel November 7, 2024 14:25

ryanthemanuel changed the title ~~chore: update to react for the reporter from 17.0.2 to 18.3.1~~ chore: update react in the reporter from 17.0.2 to 18.3.1 Nov 7, 2024

AtofStryker added pkg/reporter This is due to an issue in the packages/reporter directory Cypress 14 Issues scoped for Cypress 14 labels Nov 7, 2024

ryanthemanuel approved these changes Nov 13, 2024

View reviewed changes

AtofStryker merged commit a6d2b2f into release/14.0.0 Nov 14, 2024
84 of 86 checks passed

AtofStryker deleted the chore/update_react_18 branch November 14, 2024 00:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: update react in the reporter from 17.0.2 to 18.3.1 #30567

chore: update react in the reporter from 17.0.2 to 18.3.1 #30567

AtofStryker commented Nov 6, 2024 •

edited

Loading

cypress bot commented Nov 7, 2024 •

edited

Loading

AtofStryker Nov 7, 2024

AtofStryker Nov 7, 2024

AtofStryker Nov 7, 2024 •

edited

Loading

AtofStryker Nov 7, 2024

AtofStryker Nov 7, 2024

AtofStryker Nov 7, 2024

AtofStryker Nov 7, 2024


		const currentTestLog = findReactInstance(cy.$$('.runnable-active', top?.document)[0])

		currentTestLog.props.model._isOpen = true

chore: update react in the reporter from 17.0.2 to 18.3.1 #30567

chore: update react in the reporter from 17.0.2 to 18.3.1 #30567

Conversation

AtofStryker commented Nov 6, 2024 • edited Loading

Additional details

Steps to test

How has the user experience changed?

PR Tasks

cypress bot commented Nov 7, 2024 • edited Loading

cypress Run #58225

AtofStryker Nov 7, 2024

Choose a reason for hiding this comment

AtofStryker Nov 7, 2024

Choose a reason for hiding this comment

AtofStryker Nov 7, 2024 • edited Loading

Choose a reason for hiding this comment

AtofStryker Nov 7, 2024

Choose a reason for hiding this comment

AtofStryker Nov 7, 2024

Choose a reason for hiding this comment

AtofStryker Nov 7, 2024

Choose a reason for hiding this comment

AtofStryker Nov 7, 2024

Choose a reason for hiding this comment

AtofStryker commented Nov 6, 2024 •

edited

Loading

cypress bot commented Nov 7, 2024 •

edited

Loading

AtofStryker Nov 7, 2024 •

edited

Loading