chore: fix deprecation warnings and refactor react reporter to use functional components and hooks #31284

AtofStryker · 2025-03-13T22:01:05Z

Closes N/A

Additional details

Since update @packages/reporter to React 18, there have been several console warnings about the deprecation of class components and other API methods being removed in new versions of React. This create additional noise when trying to develop. This PR cuts over the remaining class components to functional components to lessen the deprecation messages printed to the console.

This did change some behavior under the hood, in particular some of the async nature that occurs with a functional component (i.e. useEffect vs componentDidMount or componentDidUpdate), but everything should still function the same as expected. This tries to do the minimum possible to remove class components from the reporter

Steps to test

This change should be passive, but we want to make sure all the updated components are still working correctly

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 · 2025-03-13T22:33:14Z

cypress Run #61425

Run Properties: Passed #61425 • 7a314fc7a9: see if event registration fixes windows flake

Project	`cypress`
Branch Review	`chore/fix_react_18_deprecation_warnings`
Run status	`Passed #61425`
Run duration	`09m 20s`
Commit	`7a314fc7a9: see if event registration fixes windows flake`
Committer	`AtofStryker`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`0`
Pending	`694`
Skipped	`0`
Passing	`130`
View all changes introduced in this branch ↗︎

AtofStryker · 2025-03-18T16:04:28Z

some issues on the reporter lifecycle events that need to be figured out which is the hold up on this PR

AtofStryker · 2025-03-31T16:09:22Z

all tests as passing on bf09b16, but we need to put some gates around the cy-in-cy test workarounds that should not happen in normal cypress mode

…nctional components with hooks

packages/reporter/src/attempts/attempts.tsx

packages/reporter/src/collapsible/collapsible.tsx

packages/reporter/src/commands/command.tsx

packages/reporter/src/errors/error-code-frame.tsx

packages/reporter/src/errors/test-error.tsx

packages/reporter/src/lib/flash-on-click.tsx

packages/reporter/src/lib/switch.tsx

packages/reporter/src/main.tsx

packages/reporter/src/test/test.tsx

…Open logic in collapsible to not attempt to sync state

* dependency: upgrade mocha to 7.2.0 (#31423) * dependency: upgrade mocha to 7.2.0 * changelog entry * remove the it.only from the mocha patch changelog that is triggering our stop-only check from passing * skip patches folder with stop-only check * remove extra bracket * Update protocol_spec to reflect new mocha line number for error stack trace * chore: updating v8 snapshot cache (#31424) Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> * chore: updating v8 snapshot cache (#31425) Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> * chore: updating v8 snapshot cache (#31426) Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> * chore: migrates plugin system test to a v3 extension (#31434) * chore: Update Chrome (stable) to 135.0.7049.52 (#31428) * chore: Update Chrome (stable) to 135.0.7049.52 * empty commit --------- Co-authored-by: cypress-bot[bot] <41898282+cypress-bot[bot]@users.noreply.github.com> Co-authored-by: Jennifer Shehane <[email protected]> Co-authored-by: Cacie Prins <[email protected]> * chore: bump Firefox to 137 (#31431) * chore: bump Firefox to 137 * use 137 version? weird. * just kidding, major version only has 1 zero after it................ * dependency: update server to mocha 7.2.0 (#31432) * dependency: update server to mocha 7.2.0 * Add PR to changelog * chore: updating v8 snapshot cache (#31437) Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> * chore: updating v8 snapshot cache (#31438) Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> * chore: updating v8 snapshot cache (#31439) Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> * chore: Update Chrome (beta) to 136.0.7103.17 (#31448) * chore: Update Chrome (beta) to 136.0.7103.17 * empty commit --------- Co-authored-by: cypress-bot[bot] <41898282+cypress-bot[bot]@users.noreply.github.com> Co-authored-by: Jennifer Shehane <[email protected]> * refactor: lifts toPosix to its own file, removes circular dependency between stack_utils and source_map_utils (#30983) * refactor: lifts toPosix to remove circular dependency between stack_utils and source_map_utils * camelCase to snake_case * rm duplicated file * internal: (studio) make the protocol database accessible to studio (#31443) * internal: (studio) make the protocol database accessible to studio * PR comment * chore(deps): update dependency patch-package to v8 (#31451) * chore(deps): update dependency patch-package to v8 * empty commit * add types to handle json-stable-stringify dep change --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Jennifer Shehane <[email protected]> * chore: fix deprecation warnings and refactor react reporter to use functional components and hooks (#31284) * chore: fix deprecation warnings and refactor react reporter to use functional components with hooks * chore: update code to reflect feedback from code review * fix issues with scrollIntoView() on updated component and refactor isOpen logic in collapsible to not attempt to sync state * fix issues with tests after refactor * see if event registration fixes windows flake * chore: update snap-shot-core patch package file to match version (#31449) * chore: update snap-shot-core patch package file to match version * update circle cache * experiment with removing .md from yarnclean * add .md back to yarnclean * bust circle cache * remove .md files being cleaned from yarn to get around patch-package issue * print size of cache * try out the size of the .md * remove md from yarnclean * UPdate to version without removal of markdown files * chore: updating v8 snapshot cache (#31460) Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> * chore: updating v8 snapshot cache (#31462) Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> * chore: updating v8 snapshot cache (#31461) Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> * feat: cy.press() (#31398) * wip - cy.press() command * cy command for dispatching key press/down/up events * unit tests and failure cases for cy.press() * Cypress.Keyboard.Keys definition; fix command log message * add keys to the internal keyboard type * auto-focus in cdp * ensure aut iframe is focused before dispatching key events in bidi browsers * update tests for cdp focus * fixed tests for bidi * lint * fix type ref in .d.ts * linting * skip press() driver test in ff below v135 * try all contexts for frame before failing due to missing/invalid context id * ensure error is error before accessing props * skip press driver test in webkit * changelog * debug automation middleware invocation for firefox flake * debug * cache update * use bidi automation middleware from connectToNewSpec rather than constructor * more comprehensive logging * debug socket base, additional debug in automation * install firefox automation middleware on setup as well as connectToNewSpec * unit tests for firefox-utils * proper calledWith --------- Co-authored-by: Jennifer Shehane <[email protected]> * docs: update contributing requirements for corepack (#31463) * chore: remove `du` check (#31465) * chore: use different args for `du` in win * rm du command for build * chore: release 14.3.0 (#31467) --------- Co-authored-by: Jennifer Shehane <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> Co-authored-by: Cacie Prins <[email protected]> Co-authored-by: cypress-bot[bot] <41898282+cypress-bot[bot]@users.noreply.github.com> Co-authored-by: Ryan Manuel <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Mike McCready <[email protected]>

cypress-bot · 2025-04-08T21:21:02Z

Released in 14.3.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v14.3.0, please open a new issue.

jennifer-shehane assigned AtofStryker Mar 14, 2025

AtofStryker force-pushed the chore/fix_react_18_deprecation_warnings branch from a1802a4 to d17dcf5 Compare March 17, 2025 19:29

AtofStryker force-pushed the chore/fix_react_18_deprecation_warnings branch 2 times, most recently from 51d7b8a to 3ffb320 Compare March 28, 2025 19:32

AtofStryker force-pushed the chore/fix_react_18_deprecation_warnings branch 2 times, most recently from f7c0f7e to 8fa14d3 Compare April 1, 2025 17:32

chore: fix deprecation warnings and refactor react reporter to use fu…

1f32ab5

…nctional components with hooks

AtofStryker force-pushed the chore/fix_react_18_deprecation_warnings branch from 8fa14d3 to 1f32ab5 Compare April 1, 2025 18:43

AtofStryker changed the title ~~chore: fix deprecation warnings and refactor react reporter to use hooks~~ chore: fix deprecation warnings and refactor react reporter to use functional components and hooks Apr 1, 2025

cacieprins requested changes Apr 1, 2025

View reviewed changes

CloneOfAlex approved these changes Apr 2, 2025

View reviewed changes

AtofStryker added 3 commits April 2, 2025 12:39

chore: update code to reflect feedback from code review

cc20c27

fix issues with scrollIntoView() on updated component and refactor is…

588cc18

…Open logic in collapsible to not attempt to sync state

fix issues with tests after refactor

a9b6cf6

AtofStryker requested a review from cacieprins April 3, 2025 16:22

cacieprins approved these changes Apr 3, 2025

View reviewed changes

see if event registration fixes windows flake

7a314fc

AtofStryker merged commit d691e19 into develop Apr 7, 2025
137 of 138 checks passed

AtofStryker deleted the chore/fix_react_18_deprecation_warnings branch April 7, 2025 14:37

cypress-bot bot locked as resolved and limited conversation to collaborators Apr 8, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: fix deprecation warnings and refactor react reporter to use functional components and hooks #31284

chore: fix deprecation warnings and refactor react reporter to use functional components and hooks #31284

Uh oh!

AtofStryker commented Mar 13, 2025 •

edited

Loading

Uh oh!

cypress bot commented Mar 13, 2025 •

edited

Loading

Uh oh!

AtofStryker commented Mar 18, 2025

Uh oh!

AtofStryker commented Mar 31, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cypress-bot bot commented Apr 8, 2025

Uh oh!

Uh oh!

chore: fix deprecation warnings and refactor react reporter to use functional components and hooks #31284

chore: fix deprecation warnings and refactor react reporter to use functional components and hooks #31284

Uh oh!

Conversation

AtofStryker commented Mar 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Additional details

Steps to test

How has the user experience changed?

PR Tasks

Uh oh!

cypress bot commented Mar 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

cypress Run #61425

Uh oh!

AtofStryker commented Mar 18, 2025

Uh oh!

AtofStryker commented Mar 31, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cypress-bot bot commented Apr 8, 2025

Uh oh!

Uh oh!

AtofStryker commented Mar 13, 2025 •

edited

Loading

cypress bot commented Mar 13, 2025 •

edited

Loading