Consist missing selector error running e2e test

Current behavior

I've set up Cypress and tried to integrate it into our pipeline. So far, I got Cypress up and running and a few working tests that run successfully using the GUI.

Now when trying to integrate it into our Teamcity pipeline and running docker-compuse up --exit-code-from cypress

I am consistently getting: Error: No element found that matches selector [data-cy-root]. Please add a root element with data-cy-root attribute to your "component-index.html" file so that Cypress can attach your component to the DOM.

Desired behavior

It should run successfully, since all the config is set up correctly and there is a component-index.html with a data-cy-root included.

Test code to reproduce

services:
  web-app:
    image: node:20.15.0
    working_dir: /web-app
    volumes:
      - ./web-app:/web-app
    command: npm run start:testing
    ports:
      - 3000
    networks:
      - cypress-network

  cypress:
    image: cypress/included:13.13.3
    working_dir: /web-app
    volumes:
      - ./web-app:/web-app
    depends_on:
      - web-app
    command: cypress run --browser electron --headless
    environment:
      - ENV=ci
    networks:
      - cypress-network

networks:
  cypress-network:
    driver: bridge

docker-compose.yaml located in root

import { defineConfig } from 'cypress';

let baseUrl = 'http://web-app:3000';

if (process.env.ENV === 'ci') {
  baseUrl = 'http://web-app:3000/';
}

export default defineConfig({
  component: {
    indexHtmlFile: './cypress/support/component-index.html',
    devServer: {
      framework: 'create-react-app',
      bundler: 'webpack'
    }
  },
  pageLoadTimeout: 10000,
  defaultCommandTimeout: 5000,
  execTimeout: 5000,
  taskTimeout: 5000,
  requestTimeout: 5000,
  responseTimeout: 5000,
  viewportWidth: 1200,
  viewportHeight: 700,
  retries: {
    runMode: 1,
    openMode: 1
  },
  e2e: {
    baseUrl: baseUrl,
    specPattern: 'cypress/tests/**/*.spec.{ts,tsx}',
    supportFile: false, // or 'cypress/support/index.ts'
    env: {
      environment: 'development',
      development: {
        baseUrl
      }
    },
    testIsolation: false,
    chromeWebSecurity: false
  }
});

cypress.config.ts located inside root/web-app

inside root/web-app I have a cypress folder containing all the default files untouched: commands.ts component-index.html component.ts e2e.ts

inside root/web-app/cypress/tests I have my test: ChatBody.spec.tsx:

import { mount } from 'cypress/react18';

describe('<ChatBody />', () => {
  it('should render speech bubbles with chat messages', () => {
    mount(<ChatBody />);

    cy.get('[data-testid="chat-body"]').then($el => {
      const chatBodyElement = $el[0] as HTMLElement;
      chatBodyElement.style.height = '100vh';
    });
  });

Ive tried the latest version 13.14.2 and 12.17.4 both same error.

ChatBody -- should render speech bubbles with chat messages (failed)

Cypress Version

13.14.2

Node version

14.17.2

Operating System

macOs 14.6.1 (23G93)

Debug Logs

No response

Other

No response

cypress-io / cypress