Ubuntu – All my Cypress (React) tests fail on Github Actions (CI) with this error " AssertionError: Timed out" while they pass locally

For a React project, I put in place a CI with Cypress end-to-end tests on Github Actions.

Here is the issue:

• my tests pass locally
• they all fail with this error on Github Actions : AssertionError: Timed out retrying after …ms: Expected to find content: ‘Do the laundry’ but never did. It seems like the tests cannot access the data

Add task
    1) Should add a task


  0 passing (22s)
  1 failing

  1) Add task
       Should add a task:
     AssertionError: Timed out retrying after 20000ms: Expected to find content: 'Do the laundry' but never did.
      at Context.eval (webpack:///./cypress/e2e/addTask.cy.ts:7:36)

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      0                                                                                │
  │ Failing:      1                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  1                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     22 seconds                                                                       │
  │ Spec Ran:     addTask.cy.ts                                                                    │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

Here is the AddTask Spec:

describe("Add task", () => {
 it("Should add a task", () => {
    cy.visit("/");
    cy.fixture("taskList").then((taskList) =>{
      cy.get("[data-cy='add-task']").type(taskList[0].task);
      cy.get("[data-cy='submit']").click();
      cy.contains(taskList[0].task).should("exist");
    })
  });
});

My data comes from a file in the fixture folder:

[
  {
    "task": "Do the laundry"
  },
  {
    "task": "Call Mark"
  },
  {
    "task": "Do the dinner"
  },
  {
    "task": "Do the lunch"
  },
  {
    "task": "Buy cinema tickets"
  },
  {
    "task": "Go to the supermarket"
  }
]

And this is my cypress.config.ts file:

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    baseUrl: "http://localhost:3000",
    defaultCommandTimeout: 20000,
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

Here are the solutions I put in place:

• in the cypress.config file I added a defaultCommandTimeOut of 20000 seconds

• I tried increasing { timeout: 20000 } directly in the code

• I also improved my YAML, like this:

name: CI
on: push

jobs:
 cypress-run:
   runs-on: ubuntu-latest
   steps:
     - name: Checkout
       uses: actions/checkout@v3
     - name: Setup Node.js
       uses: actions/setup-node@v3
       with:
        node-version: 18
     - name: Install dependencies
       run: npm install
       working-directory: ./front-end
     - name: Cypress run
       uses: cypress-io/github-action@v5
       with:
        working-directory: ./front-end
        build: npm run build
        start: npm start
        wait-on: http://127.0.0.1:3000
        wait-on-timeout: 180
        browser: chrome

Please, let me know if you have any solutions for this problem!