Skip to content

Component test fails with Node.js 18 on Windows 11 #702

@MikeMcC399

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions