Component test fails with Node.js 18 on Windows 11

[MikeMcC399]

Problem description

If the Cypress test from examples/component-tests is run locally on Windows 11 under Node.js 18 it fails. There are various results including hanging or error messages, however none of the browsers tried was able to succeed in testing. (Electron, Chrome and Firefox.)

It looks like examples/component-tests was put together during the beta phase of component testing and it has a structure which is different from the current documentation about component testing. This makes it difficult to understand as an example. For instance @cypress/react says "Note: This package is bundled with the cypress package and should not need to be installed separately."

Steps to reproduce

(Cypress is currently at version 12.3.0.)

In a cloned copy of cypress-io/github-action on Windows 11 execute:

nvm use 18.13.0
cd examples/component-tests
npm ci
npx cypress run --component

which produces the following output:

...
...
webpack 5.65.0 compiled successfully in 137 ms
No issues found.

and does not start any Cypress test.

npx cypress run --component --browser chrome
Cypress is started however it just hangs at "No issues found." with no error message.

npx cypress run --component --browser firefox
"Error: connect ECONNREFUSED 127.0.0.1:50722
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)".

Alternative suggested fixes

Rebuild test using documented example

Follow https://docs.cypress.io/guides/component-testing/react/quickstart#Getting-Started.

Use vite@3 until vite@4 becomes officially supported. See cypress-io/cypress#24969. The PR is merged, however this has not yet reached a released version of Cypress. Edit Cypress version 12.4.0 released on Jan 24, 2023 supports vite@4.

npm create vite@4 my-awesome-app -- --template react
cd my-awesome-app
npm install cypress@12 -D
npx cypress open

Follow the instructions to create Stepper.jsx and Stepper.cy.jsx,

Use existing updated test

The component test react-cra5-ts from the repository cypress-io/cypress-component-testing-apps/ works correctly under Ubuntu, Windows and macOS. It is already configured for Cypress 12.0.0.

Use this test as a drop-in replacement for examples/component-tests.

[MikeMcC399]

I can submit a PR for either of the suggested alternatives. I would prefer to use "Rebuild test using documented example" according to https://docs.cypress.io/guides/component-testing/react/quickstart#Getting-Started.

[MikeMcC399]

• PR Replace component test with React and Vite 4 #748 provides a proposal for a replacement component test based on up-to-date materials including Cypress 12.4.0, React and Vite 4.