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

Question

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

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

Karma.config

// Karma 配置文件，更多信息见链接 // https://karma-runner.github.io/0.13/config/configuration-file.html module.exports = 功能（配置）{ 配置.set({ 基本路径：''， 框架：['jasmine'，'angular-cli']， 插件：[ 要求（'业力茉莉'）， 需要（'业力铬启动器'）， 要求（'业力重新映射-伊斯坦布尔'）， 需要（'angular-cli/plugins/karma'） ], 文件：[ {模式：'./src/*/*.spec.ts'，观看：假} ], 预处理器：{ './src/test.ts': ['angular-cli'] }, 哑剧：{ '文本/x-typescript'：['ts'，'tsx'] }, 重映射伊斯坦布尔记者：{ 报告：{ html: '覆盖率', lcovonly: './coverage/coverage.lcov' } }, 角Cli：{ 配置：'./angular-cli.json', 环境：'开发' }, 记者：config.angularCli && config.angularCli.codeCoverage ? ['进步'，'业力重新映射-伊斯坦布尔'] ： ['进步']， 端口：9876， 颜色：真实， 日志级别：config.LOG_INFO， 自动监视：假， 浏览器：['Chrome']， 单跑：真 }); };

关闭 Chrome 时出错：

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

Answer 1

所以似乎关闭自动监视是造成这种情况的原因。如果我重新打开它，它可以工作。当您通过 ng test 运行时，似乎将 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',
            ]
        }
    }
  });
};

为了完整起见，这里也是量角器 conf 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 } }));
  }
};