Unable to run Angular test cases inside docker container

Question

30 01 2019 10:47:39.829:WARN [karma]: No captured browser, open http://localhost:9876/
30 01 2019 10:47:39.835:INFO [karma-server]: Karma v3.1.4 server started at http://0.0.0.0:9876/
30 01 2019 10:47:39.836:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
30 01 2019 10:47:39.847:INFO [launcher]: Starting browser Chrome
30 01 2019 10:47:39.848:ERROR [launcher]: No binary for Chrome browser on your platform.
  Please, set "CHROME_BIN" env variable.
30 01 2019 10:47:44.265:WARN [karma]: No captured browser, open http://localhost:9876/

i get this error logged out in in my console.

My docker-compose file

version: '3'
services:
  web:
    build: 
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:4200"
    volumes:
      - /app/node_modules
      - ./:/app
  tests:
    build:
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - /app/node_modules
      - ./:/app
    command: ["npm","run","test"]

tried many things looking n this forum but nothing worked out actually.

Dockerfile

FROM node:alpine
WORKDIR '/app'
COPY package.json .
RUN npm install
COPY . .
CMD ["npm","run","start"]

Answer 1

First make sure to install Chrome or Chromium within the docker container because the log shows an error that there's no Chrome browser available and/or the according environment variable wasn’t set.

No binary for Chrome browser on your platform. Please, set "CHROME_BIN" env variable.

Install it in alpine linux as in the dockerfile here in the alpine-chrome project.

Then once it is assured that Chrome(ium) is available, the karama.conf.js file must be edited to use ChromeHeadless.

Here an example running for me within a docker container using the headless browser and a modified karma.conf.js (which is located in the angular app root folder)

Here a karma.conf.js file:

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['ChromeHeadlessNoSandbox'],
    customLaunchers: {
      ChromeHeadlessNoSandbox: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox','--disable-setuid-sandbox']
      }
    },
    singleRun: false
  });
};