无法在 docker 容器内运行 Angular 测试用例

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/

我在控制台中注销了此错误。

我的 docker-compose 文件

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"]

在这个论坛上尝试了很多东西，但实际上没有任何效果。

文件

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

Answer 1

首先确保在 docker 容器中安装Chrome或Chromium，因为日志显示没有可用的Chrome浏览器和/或相应的环境变量未设置的错误。

您的平台上没有 Chrome 浏览器的二进制文件。请设置“CHROME_BIN”环境变量。

将它安装在 alpine linux 中，就像在alpine-chrome项目中的 dockerfile 中一样。

然后，一旦确定Chrome(ium)可用，就必须编辑karama.conf.js文件以使用ChromeHeadless.

这是使用无头浏览器和修改后的karma.conf.js（位于 angular 应用程序根文件夹中）在docker容器中为我运行的示例

这里有一个 karma.conf.js 文件：

// 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
  });
};