Run React appplication inside Circleci so it can be accessed by Cypress e2e test

Job ID: 35975819

Budget: $30 – $250 USD

I need help configuring Circleci to run a React application, so it can be accessed by Cypress e2e tests.

This is the configuration I have till now, and I think the issue is that the cypress instance cannot reach the http-server instance, even though they are run in the same job:

version: 2.1

jobs:
cypress:
working_directory: ~/project
docker:
- image: cypress/base:18.12.1
environment:
CYPRESS_baseUrl: http://127.0.0.1:3000
steps:
- checkout:
path: ~/project
- run:
name: Install dependencies
command: npm ci --ignore-scripts
- run:
name: Build
command: npm run build
- run:
name: Install http-server
command: npm install -g http-server
- run:
name: Serve React app
command: |
http-server ./dist/ -a 127.0.0.1 -p 3000 &
# - run:
# name: Wait for server to start
# command: npx wait-on http-get:http://127.0.0.1:3000
- run:
name: cypress install
command: npx cypress install
- run:
name: Run cypress tests
command: npx cypress run

# Invoke jobs via workflows
# See: https://circleci.com/docs/2.0/configuration-reference/#workflows
workflows:
e2e_test:
jobs:
- cypress

The error I am receiving from Cypress is:
[667:0213/085129.291037:ERROR:gpu_memory_buffer_support_x11.cc(44)] dri3 extension not supported.
Cypress could not verify that this server is running:

> http://127.0.0.1:3000

We are verifying this server because it has been configured as your baseUrl.

Cypress automatically waits until your server is accessible before running tests.

We will try connecting to it 3 more times...
We will try connecting to it 2 more times...
We will try connecting to it 1 more time...

Cypress failed to verify that your server is running.

Please start this server and then run Cypress again.


Exited with code exit status 1

CircleCI received exit code 1
Related categories: Testing / QA Test Automation React.js CircleCI