Support React 19 in Component Testing

[jennifer-shehane]

What would you like?

React 19 Beta is out: https://react.dev/blog/2024/04/25/react-19-upgrade-guide

Why is this needed?

No response

Other

No response

[AtofStryker]

support spike for react 19 is done and implemented here. Once React 19 releases, we can revisit this and get the feature shipped out to support react 19 CT fairly quickly.

[boylec]

AFAIK React 19 is in RC status.

Any ideas about when this support within cypress is going to be released?

[AtofStryker]

AFAIK React 19 is in RC status.

Any ideas about when this support within cypress is going to be released?

@boylec We are waiting for Raact to release version 19 as generally available. Most of the implementation work for this is done on our end, so the turnaround should be short.

[boylec]

@AtofStryker thanks for the heads up.

We are relying on some juicy features in the Next.JS 15 RC (and hence React 19 RC by indirect dependency) in production.

Any chance you guys might consider providing a path for us bleeding edge fanatics to be able to use cypress for component testing against these versions considering the work is mostly done as you mentioned?

[AtofStryker]

@AtofStryker thanks for the heads up.

We are relying on some juicy features in the Next.JS 15 RC (and hence React 19 RC by indirect dependency) in production.

Any chance you guys might consider providing a path for us bleeding edge fanatics to be able to use cypress for component testing against these versions considering the work is mostly done as you mentioned?

Hey @boylec . Sorry for the late reply. A lot going on 😅 . Currently at this time we don't have a mechanism planned to have release candidates of the component testing versions generally available. It gets a bit difficult since the component testing harnesses ship with the app and the waters could get muddy between what is breaking and what isn't.

What I can say is that the React 19 testing harness really does not differ almost at all from the React 18 harness, so you could leverage that for now and ignore the dependency warnings. However, if more features are added or changed (for example, angular signals or something else that impacts the harness), we can discuss making a binary readily available.

[AtofStryker]

@boylec we are working on getting this into Cypress 14. If you want to try one of the pre release binaries they should be available on this commit if you scroll all the way to the bottom. I would love feedback!

[boylec]

@boylec we are working on getting this into Cypress 14. If you want to try one of the pre release binaries they should be available on this commit if you scroll all the way to the bottom. I would love feedback!

Thanks for the update!!! Super excited about this it was our only blocker from bumping to React 19

[boylec]

@AtofStryker Unfortunately I'm having trouble installing the prerelease version...

sudo yarn add -D cypress@https://cdn.cypress.io/beta/npm/13.15.2/linux-arm64/feat/support_react_19-cd07b42d6c9fb292fd890fbbd4418083acf66cb8/cypress.tgz

# This file contains the result of Yarn building a package (cypress@https://cdn.cypress.io/beta/npm/13.15.2/linux-arm64/feat/support_react_19-cd07b42d6c9fb292fd890fbbd4418083acf66cb8/cypress.tgz)
# Script name: postinstall

⚠ Warning: You are installing a pre-release build of Cypress.

Bugs may be present which do not exist in production builds.

This build was created from:
  * Commit SHA: cd07b42d6c9fb292fd890fbbd4418083acf66cb8
  * Commit Branch: feat/support_react_19
  * Commit Timestamp: 2024-11-20T01:55:18.000Z

Installing Cypress (version: https://cdn.cypress.io/beta/binary/13.15.2/darwin-x64/feat/support_react_19-cd07b42d6c9fb292fd890fbbd4418083acf66cb8/cypress.zip)

[STARTED] Task without title.
[FAILED] The Cypress App could not be downloaded.
[FAILED] 
[FAILED] Does your workplace require a proxy to be used to access the Internet? If so, you must configure the HTTP_PROXY environment variable before downloading Cypress. Read more: https://on.cypress.io/proxy-configuration
[FAILED] 
[FAILED] Otherwise, please check network connectivity and try again:
[FAILED] 
[FAILED] ----------
[FAILED] 
[FAILED] URL: https://cdn.cypress.io/beta/binary/13.15.2/darwin-x64/feat/support_react_19-cd07b42d6c9fb292fd890fbbd4418083acf66cb8/cypress.zip
[FAILED] Error: Failed downloading the Cypress binary.
[FAILED] Response code: 404
[FAILED] Response message: Not Found
[FAILED] 
[FAILED] ----------
[FAILED] 
[FAILED] Platform: darwin-x64 (23.5.0)
[FAILED] Cypress Version: 13.15.2
The Cypress App could not be downloaded.

Does your workplace require a proxy to be used to access the Internet? If so, you must configure the HTTP_PROXY environment variable before downloading Cypress. Read more: https://on.cypress.io/proxy-configuration

Otherwise, please check network connectivity and try again:

----------

URL: https://cdn.cypress.io/beta/binary/13.15.2/darwin-x64/feat/support_react_19-cd07b42d6c9fb292fd890fbbd4418083acf66cb8/cypress.zip
Error: Failed downloading the Cypress binary.
Response code: 404
Response message: Not Found

----------

Platform: darwin-x64 (23.5.0)
Cypress Version: 13.15.2

I'll try and spend 30 min troubleshooting but can't promise I'll be able to spend more than that and get you feedback today. When I hit the URL from the logs: https://cdn.cypress.io/beta/binary/13.15.2/darwin-x64/feat/support_react_19-cd07b42d6c9fb292fd890fbbd4418083acf66cb8/cypress.zip directly from browser, it seems the file resolves fine and downloads but for some reason the download fails in the context of the yarn add command.

[boylec]

Looks like something strange going on with 302's when I hit the link w/ the browser that ultimately leads to https://cdn.cypress.io/desktop/13.16.0/darwin-x64/cypress.zip being downloaded. But the 302 dance doesn't resolve the same way running the pre-release install from yarn and just fails

[AtofStryker]

@AtofStryker Unfortunately I'm having trouble installing the prerelease version...

sudo yarn add -D cypress@https://cdn.cypress.io/beta/npm/13.15.2/linux-arm64/feat/support_react_19-cd07b42d6c9fb292fd890fbbd4418083acf66cb8/cypress.tgz

# This file contains the result of Yarn building a package (cypress@https://cdn.cypress.io/beta/npm/13.15.2/linux-arm64/feat/support_react_19-cd07b42d6c9fb292fd890fbbd4418083acf66cb8/cypress.tgz)
# Script name: postinstall

⚠ Warning: You are installing a pre-release build of Cypress.

Bugs may be present which do not exist in production builds.

This build was created from:
  * Commit SHA: cd07b42d6c9fb292fd890fbbd4418083acf66cb8
  * Commit Branch: feat/support_react_19
  * Commit Timestamp: 2024-11-20T01:55:18.000Z

Installing Cypress (version: https://cdn.cypress.io/beta/binary/13.15.2/darwin-x64/feat/support_react_19-cd07b42d6c9fb292fd890fbbd4418083acf66cb8/cypress.zip)

[STARTED] Task without title.
[FAILED] The Cypress App could not be downloaded.
[FAILED] 
[FAILED] Does your workplace require a proxy to be used to access the Internet? If so, you must configure the HTTP_PROXY environment variable before downloading Cypress. Read more: https://on.cypress.io/proxy-configuration
[FAILED] 
[FAILED] Otherwise, please check network connectivity and try again:
[FAILED] 
[FAILED] ----------
[FAILED] 
[FAILED] URL: https://cdn.cypress.io/beta/binary/13.15.2/darwin-x64/feat/support_react_19-cd07b42d6c9fb292fd890fbbd4418083acf66cb8/cypress.zip
[FAILED] Error: Failed downloading the Cypress binary.
[FAILED] Response code: 404
[FAILED] Response message: Not Found
[FAILED] 
[FAILED] ----------
[FAILED] 
[FAILED] Platform: darwin-x64 (23.5.0)
[FAILED] Cypress Version: 13.15.2
The Cypress App could not be downloaded.

Does your workplace require a proxy to be used to access the Internet? If so, you must configure the HTTP_PROXY environment variable before downloading Cypress. Read more: https://on.cypress.io/proxy-configuration

Otherwise, please check network connectivity and try again:

----------

URL: https://cdn.cypress.io/beta/binary/13.15.2/darwin-x64/feat/support_react_19-cd07b42d6c9fb292fd890fbbd4418083acf66cb8/cypress.zip
Error: Failed downloading the Cypress binary.
Response code: 404
Response message: Not Found

----------

Platform: darwin-x64 (23.5.0)
Cypress Version: 13.15.2

I'll try and spend 30 min troubleshooting but can't promise I'll be able to spend more than that and get you feedback today. When I hit the URL from the logs: https://cdn.cypress.io/beta/binary/13.15.2/darwin-x64/feat/support_react_19-cd07b42d6c9fb292fd890fbbd4418083acf66cb8/cypress.zip directly from browser, it seems the file resolves fine and downloads but for some reason the download fails in the context of the yarn add command.

Ah I just need to bust our Cloudflare cache. Can you give it a try in 5-10 minutes?

[boylec]

@AtofStryker

my component tests are running and passing however I'm getting reams of this log the entire run

not sure if its related to the PR or perhaps something else

[boylec]

Tried clearing cache and reinstalling binary (darwin x64 on macos intel) but logs are still chirping very verbosely as reported above

[boylec]

looks like this issue covers it

#30563

apparently when you guys upgrade electron as part of cypress 14 this should clear out?

[AtofStryker]

#30563

awesome glad everything is working!

looks like this issue covers it

#30563

apparently when you guys upgrade electron as part of cypress 14 this should clear out?

I think right now its an issue with Electron 32 which is what Cypress 14 is planning to ship with, but bould be addressed when we update to Electron 33. We should be able to filter out those messages from the console so it doesn't negatively impact our darwin intel users

[AtofStryker]

#30563

awesome glad everything is working!

looks like this issue covers it
#30563
apparently when you guys upgrade electron as part of cypress 14 this should clear out?

I think right now its an issue with Electron 32 which is what Cypress 14 is planning to ship with, but bould be addressed when we update to Electron 33. We should be able to filter out those messages from the console so it doesn't negatively impact our darwin intel users

@boylec we will have this addressed in 14 with #30663

[VijayMeena701]

Really need Support for React 19. Waiting for a long time now. 🙇

[AtofStryker]

Really need Support for React 19. Waiting for a long time now. 🙇

@VijayMeena701 this will be releasing with Cypress 14 early Q1 2025.