Cypress Testing: stuck at wait-on http://localhost:3000

[CGhm]

Hi, I have an issue which I don’t quite understand. I’m currently new with Cypress+CircleCI together.

Using Cypress to do testing of my web app locally works fine. But when i want to set it up with CircleCI, I get stuck at “wait-on” step.

I worked on 2 different ways in setting up the circleci/config file file. But all ended up stuck at ‘wait-on’ step. And I get this message below and it is checked Green. But i’m not sure if the app is running in localhost or it exited before it runs the wait-on. I also have background: true in my second version. Can someone please guide me in this? Any suggestions on how to set this up properly? Below are my versions of the circleci/config file

Checked green

#!/bin/bash -eo pipefail
yarn start
yarn run v1.10.1
$ PORT=3000 react-scripts start
｢wds｣: Project is running at http://172.20.0.3/
｢wds｣: webpack output is served from
｢wds｣: Content not from webpack is served from /root/project/public
｢wds｣: 404s will fallback to /
Starting the development server…

Done in 1.40s.
CircleCI received exit code 0

First version config file

version: 2.1
orbs:
  cypress: cypress-io/cypress@1
workflows:
  build:
    jobs:
      - cypress/run:
          yarn: true
          install-command: 'yarn add firebase-tools --dev'
          start: yarn start
          wait-on: 'http://localhost:3000'
          post-steps:
            - run: 'CI=false yarn build'
            - run: './node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN'

Second version config file

version: 2.1
CI: false
jobs:
  build:
    docker:
      - image: 'cypress/base:12'
    working_directory: ~/repo
    steps:
      - checkout
      - restore_cache:
          keys:
            - 'v1-dependencies-{{ checksum "package.json" }}'
            - v1-dependencies-
      - run: 'yarn install --frozen-lockfile'
      - run: 'yarn add firebase-tools --dev'
      - save_cache:
          paths:
            - node_modules
          key: 'v1-dependencies-{{ checksum "package.json" }}'
      - run: 
          name: App in the background
          command: 'yarn start'
          background: true
      - run: 
          name: wait for localhost to load
          command: 'yarn wait-on http://localhost:3000'
      - run: 'yarn cy:run'
      - run: 'CI=false yarn build'
      - run: './node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN'

[CGhm]

I found a solution. My problem was not caused by CircleCI or Cypress. It was mainly because of react-script 3.4.1 which fails to start.

Solution: Downgrade react-script to 3.4.0
Source: https://github.com/facebook/create-react-app/issues/8688#issuecomment-602678446