Replace component test with React and Vite 4

[MikeMcC399]

This PR resolves issue #702 "Component test fails with Node.js 18 on Windows 11".

Current component-tests

The current outdated examples/component-tests demonstrates Cypress component testing with a React App configuration. It however does not run on Microsoft Windows with the Node.js LTS version (18) and it uses some component testing beta materials from prior to the release of Cypress v10, making it difficult to understand.

Replacement component-tests

This PR replaces the previous React App example with an up-to-date example built according to the Cypress documentation Guides > Cypress Component Testing > React Component Testing > React Quickstart. This uses Vite 4 to create the app, which is now supported by Cypress in version 12.4.0.

The following steps were taken:

Delete the existing examples/component-tests directory. Run the vite setup and install Cypress:

cd examples
rm -rf component-tests
npm create vite example-component-tests -- --template react
mv example-component-tests component-tests
cd component-tests
npm install cypress@12 -D -E

Continue with Configuration Component Testing to create Stepper.jsx and Stepper.cy.jsx:

npx cypress open

Create the file examples/component-tests/src/components/Stepper.jsx with contents as instructed.

In Cypress test app use "Create from component" from Stepper.jsx.

Modify the created test examples/component-tests/src/components/Stepper.cy.jsx as instructed by adding each of the suggested tests.

Add npm test for cypress run --component to examples/component-tests/package.json.

[MikeMcC399]

This PR also mitigates 2 critical vulnerabilities in the current examples/component-tests as reported by dependabot and npm audit regarding loader-utils and ejs.

[jaffrepaul]

Can you clarify the last line above? I didn't see a cypress run --component script.

Add npm test for cypress run --component to examples/component-tests/package.json.

[MikeMcC399]

@jaffrepaul

Can you clarify the last line above? I didn't see a cypress run --component script.

Add npm test for cypress run --component to examples/component-tests/package.json.

https://github.com/MikeMcC399/github-action/blob/fad731568772da72e3fc1c13f36845777b199426/examples/component-tests/package.json#L10

"test": "cypress run --component"

[MikeMcC399]

cd examples/component-tests
npm ci

added 264 packages, and audited 265 packages in 5s

43 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

npm test

> [email protected] test
> cypress run --component



====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        12.4.1                                                                         │
  │ Browser:        Electron 106 (headless)                                                        │
  │ Node Version:   v18.14.0 (C:\Program Files\nodejs\node.exe)                                    │
  │ Specs:          1 found (Stepper.cy.jsx)                                                       │
  │ Searched:       **/*.cy.{js,jsx,ts,tsx}                                                        │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  Stepper.cy.jsx                                                                  (1 of 1)


  <Stepper />
    √ renders (44ms)
    √ stepper should default to 0 (25ms)
    √ supports an "initial" prop to set the value (19ms)
    √ when the increment button is pressed, the counter is incremented (105ms)
    √ when the decrement button is pressed, the counter is decremented (99ms)
    √ clicking + fires a change event with the incremented value (101ms)


  6 passing (418ms)


  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        6                                                                                │
  │ Passing:      6                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     Stepper.cy.jsx                                                                   │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Video)

  -  Started processing:  Compressing to 32 CRF
  -  Finished processing: 0 seconds

  -  Video output: 
  -  ...\cypress-io\github-action\examples\component-tests\cypress\videos\Stepper.cy.jsx.mp4


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  Stepper.cy.jsx                           415ms        6        6        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        415ms        6        6        -        -        -

[MikeMcC399]

• The success log is on https://github.com/MikeMcC399/github-action/actions/runs/4086927240/jobs/7046815245

• There is no trigger for component test on pull_request. That would get fixed in PR Harmonize Component test workflow to E2E example workflows #771

[jaffrepaul]

Ah, thank you. I misunderstood.

[MikeMcC399]

Successful merge logged in job 4118815542.

[MikeMcC399]

@jaffrepaul

Ah, thank you. I misunderstood.

The description I provided was confusing, because I linked to examples/component-tests/package.json, which was unchanged at the time when you were reviewing the PR. Sorry for that!

It is looking good in the master branch now, so we are quite close to completion of example updates!

[github-actions]

🎉 This PR is included in version 5.0.9 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀