Cypress Github Action Fail

Question

I use GitHub Action for CI/CD, I write some cypress tests and YAML files from it. But when I push the repository I got an error.

name: Cypress Tests

# Controls when the workflow will run
on:
 # Triggers the workflow on push or pull request events but only for the main branch
push:
  branches: [ main ]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
     steps:
      - name: Checkout
     uses: actions/checkout@v2
     # Install NPM dependencies, cache them correctly
     # and run all Cypress tests
     - name: Cypress run
       uses: cypress-io/github-action@v2
       with:
         build: npm run build
         start: npm start

The failing error

./src/App.scss
Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reversed-spider-solitaire@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the reversed-spider-solitaire@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output 
above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runner/.npm/_logs/2021-08-22T20_28_01_743Z-debug.log

Error: The process '/usr/local/bin/npm' failed with exit code 1

How I fix that problem. When I run the cypress in my local, it works properly.

Answer 1

You need to put a first step to setup Node version.

- name: Setup Node
      uses: actions/setup-node@v1
      with:
        node-version: 15

Answer 2

The issue is not related to github actions directly but instead the node version used by the cypress action which pulls it from cache and the node sass version you use in your application. Per the error message you should be able to use any node version between 12 and 16 (latest) per the node sass package readme https://www.npmjs.com/package/node-sass

For more info check out this post Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

You can see in this demo that cypress works properly utilizing the sample of the action which let's you know that this is not a github action or cypress setup https://github.com/meroware/demo-cypress-github-action

Make the following changes and you should be good to go

name: Cypress Tests
on:
  push:
    branches: [ main ]
jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 14 # but you can do 12-16
      - name: Cypress run
        uses: cypress-io/github-action@v2.3.6
        with:
          build: npm run build
          start: npm start

Answer 3

You can provide a strategy matrix

 runs-on: ubuntu-latest
 strategy:
      matrix:
        node: [ 14, 16, 18 ]

Then use this in install step

- name: Cypress install
        uses: cypress-io/github-action@v4
        with:
          node-version: ${{ matrix.node }}