更新

Question

我在Webstorm中创建了一个Angular-CLI项目，我试图确保所有测试都在运行。它启动了Chrome浏览器，但没有报告任何内容。所以我在第一个块中修改了app.component.spec.ts，只添加了一个console.log语句，该语句没有登录到控制台。

在我手动关闭Chrome之前，它不会报告任何内容或提供任何错误（出于某种原因，即使我将其设置为仅在自身未关闭时运行）。它也没有显示console.log语句。

Karma.config

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

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', 'angular-cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-remap-istanbul'),
      require('angular-cli/plugins/karma')
    ],
    files: [
      { pattern: './src/*/*.spec.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['angular-cli']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    remapIstanbulReporter: {
      reports: {
        html: 'coverage',
        lcovonly: './coverage/coverage.lcov'
      }
    },
    angularCli: {
      config: './angular-cli.json',
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'karma-remap-istanbul']
              : ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['Chrome'],
    singleRun: true
  });
};

关闭Chrome时的错误：

22 11 2016 10:01:27.657:ERROR [karma]: TypeError: Cannot read property 'map' of undefined
    at ProgressReporter._render (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\reporters\progress.js:53:26)
    at ProgressReporter.writeCommonMsg (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\reporters\progress.js:9:
44)
    at ProgressReporter.BaseReporter.onBrowserError (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\reporters\b
ase.js:63:10)
    at Server. (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\events.js:13:22)
    at emitTwo (events.js:111:20)
    at Server.emit (events.js:191:7)
    at disconnect (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\browser.js:40:13)
    at Browser.onDisconnect (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\browser.js:157:7)
    at Socket. (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\events.js:13:22)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Socket.emit (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\socket.io\lib\socket.js:128:10)
    at Socket.onclose (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\socket.io\lib\socket.js:425:8)
    at Client.onclose (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\socket.io\lib\client.js:232:24)
    at emitTwo (events.js:111:20)
    at Socket.emit (events.js:191:7)
    at Socket.onClose (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\engine.io\lib\socket.js:304:10)
    at WebSocket.g (events.js:291:16)
    at emitNone (events.js:86:13)
    at WebSocket.emit (events.js:185:7)
    at WebSocket.Transport.onClose (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\engine.io\lib\transport.js:126:8)
    at WebSocket.g (events.js:291:16)
    at emitTwo (events.js:106:13)
    at WebSocket.emit (events.js:191:7)
    at WebSocket.cleanupWebsocketResources (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\engine.io\node_modules\ws\lib\
WebSocket.js:927:10)
    at emitOne (events.js:101:20)
    at Socket.emit (events.js:188:7)
    at emitErrorNT (net.js:1276:8)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Answer 1

所以看起来关闭autowatch是导致这种情况的原因。如果我重新打开它，它会起作用。当你通过ng测试运行它时，似乎将singleRun设置为true也没有效果。

如果你想用autoWatch false和singleRun true来运行它，你需要使用karma start。旧学校FTW！

更新

根据Angular-CLI usage docs，使用singleRun而不使用autoWatch：

运行单元测试

ng test

测试将在通过Karma执行构建后执行，它将自动监视您的文件以进行更改。您可以通过--watch=false或--single-run一次运行测试。

Answer 2

听起来你想要打开autoWatch并打开singleRun。使用--config传递单独的配置文件进行测试。如果你关心的只是结果，你还可以不显示chrome窗口，同时在你想要调试测试时仍保留原始配置。

更改以下配置文件并运行npm run test:headless或ng test --config karma.conf.headless.js。您还可以在ci环境中使用它来在vm中运行测试并记录测试结果。

添加新节点脚本以无头地运行测试。

的package.json：

{
...
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "test:headless": "ng test --config karma.conf.headless.js",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "e2e:headless": "ng e2e --config protractor.conf.headless.js"
  },
...
}

karma.conf.headless.js

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
        ? ['progress', 'coverage-istanbul']
        : ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['ChromeHeadless'],
    singleRun: true,
    customLaunchers: {
        ChromeHeadless: {
            base: 'Chrome',
            flags: [
                // See https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
                '--headless',
                '--disable-gpu',
                // Without a remote debugging port, Google Chrome exits immediately.
                '--remote-debugging-port=9222',
            ]
        }
    }
  });
};

为了完整性，这里也是量角器 protractor.conf.headless.js

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome',
    chromeOptions: {
        args: [ "--headless", "--disable-gpu", "--window-size=1280x720" ]
    }
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  onPrepare() {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  }
};

Angular-cli没有运行spec.ts文件

2 个答案:

更新

运行单元测试