Docker Compose Running Cypress Tests

docker-compose.yml

version: '3'

services:

  # the client container, running webpack and the dev server
  client:
    image: path_to/image
    networks:
      - allhosts
    volumes:
      # this is where our code is mounted into the running container
      - ./client/:/client
      - ./shared/:/client/src/shared-copied # see shared-copied.md
    working_dir: /client
    command: yarn start
    environment:
      PORT: 3000
    ports:
      - "3000:3000"
  e2e:
    #cypress/included runs tests immediately upon mount - less boilerplate but not sure how to defer loading until client is ready
    #image: "cypress/included:10.6.0" 
    image: "cypress"
    build: ./e2e
    container_name: cypress
    network_mode: host
    depends_on:
      - client
    environment:
      - CYPRESS_baseUrl=http://localhost:3000
    # TODO: temporary - 30 second delay to wait for localhost to be ready, followed by execution of cypress tests
    command: ["./wait-for-it.sh", "-t","30","http://localhost:3000", "--", "npx","cypress","run"]
    # TODO: try to run wait-on vs wait-for-it to avoid arbitrary timeouts
    volumes:
      - ./e2e/cypress:/app/cypress
      - ./e2e/cypress.config.js:/app/cypress.config.js
      - ./e2e/wait-for-it.sh:/app/wait-for-it.sh

e2e->cypress->e2e->spec.cy.js

//your tests here
it("contains foo", () => {
  cy.visit("/");
  cy.get(".foo").should("contain", "foo");
});

e2e->cypress.config.js

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    baseUrl: "http://localhost:3000",
    supportFile: false,
  },
});

e2e->Dockerfile

FROM cypress/base:14
WORKDIR /app

# dependencies will be installed only if the package files change
COPY package.json .
COPY package-lock.json .
# delay script
COPY wait-for-it.sh .

# by setting CI environment variable we switch the Cypress install messages
# to small "started / finished" and avoid 1000s of lines of progress messages
# https://github.com/cypress-io/cypress/issues/1243
ENV CI=1
RUN npm ci
# verify that Cypress has been installed correctly.
# running this command separately from "cypress run" will also cache its result
# to avoid verifying again when running the tests
RUN npx cypress verify

e2e->package.json

{
  "name": "e2e",
  "version": "1.0.0",
  "main": "cypress.config.js",
  "scripts": {
    "start": "yarn && wait-on http://localhost:3000 && npx cypress run",
  },
  "devDependencies": {
    "cypress": "10.6.0"
  },
  "dependencies": {
    "wait-on": "6.0.1"
  }
}