如何在控制台中获得更好的测试报告？答案

【问题标题】：How to get better test reports in the console?如何在控制台中获得更好的测试报告？
【发布时间】：2013-06-21 18:47:45
【问题描述】：

我有一个相当简单的 karma.config.js 文件

basePath = '../';


files = [
  JASMINE,
  JASMINE_ADAPTER,
  'js/lib/angular*.js',
  'test/lib/angular/angular-mocks.js',
  'js/**/*.js',
  'test/unit/**/*.js'
];

autoWatch = true;
browsers = ['PhantomJS'];

当我运行karma start config/karma.conf.js --single-run 时，我得到以下输出

$ karma start config/karma.conf.js --single-run
[2013-06-24 23:47:08.750] [DEBUG] config - autoWatch set to false, because of singleRun
INFO [karma]: Karma server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9 (Mac)]: Connected on socket id LwMoWxzIbSUuBsvIqB_m
PhantomJS 1.9 (Mac): Executed 6 of 6 SUCCESS (0.073 secs / 0.02 secs)

我一直在寻找一些东西来告诉我如何获取记录的测试的输出（例如SUCCESS Unit: services myService should behave）

我可以看到测试输出的唯一方法是打开 Chrome 并单击“调试”，然后显示开发人员工具控制台。我希望将消息注销到终端，但我不知道如何让它工作。

【问题讨论】：

这个问题的标题很糟糕
是的。如果我没记错的话，我在试图弄清楚它太久之后愤怒地输入了那个标题。谷歌搜索的不仅仅是标题，这是一件好事。
@brettof86 有人篡改了这个问题的标题。在阅读问题本身时，它显然与 HTML 无关。我打算尝试替换标题，但经过一番思考，我认为我对这个问题的理解不足以做到这一点。（我不清楚你是在寻找一种简单的报告机制，还是想从测试本身中捕获某种形式的输出。）你能修改一下吗？
你说得对，它与 HTML 无关。我一直在寻找控制台记者，特别是 karma-spec-reporter。我再次编辑了标题并删除了“HTML”。

标签： javascript node.js karma-jasmine karma-runner

【解决方案1】：

通过安装 karma-spec-reporter 修复

npm install karma-spec-reporter --save-dev

并添加我的 karma.config.js

reporters: ['spec'],

根据karma documentation

默认情况下，Karma 会加载与其同级的所有 NPM 模块，并且它们的名称与 karma-* 匹配。

但有些用户不得不将以下内容添加到他们的配置中

plugins: ['karma-spec-reporter']

【讨论】：

直到我在 karma.conf.js 文件中将 karma-spec-reporter 指定为插件之前，它对我不起作用；这就是我的插件数组的外观-reporter' ]，最后注意 karma-spec-reporter
是的，你必须告诉配置你正在使用这个插件。
如果您的所有插件都以karma- 开头，那么您不必引用它们中的任何一个。默认行为是加载所有 karma-* 插件。 karma-runner.github.io/0.12/config/plugins.html
像@blues_driven 和 brettof86 描述的那样工作。
这里相同.. 必须添加插件.. 我继续并建议对此答案进行编辑。

【解决方案2】：

这是我的工作（草稿）配置，没有“插件”部分（实际上我不完全理解为什么我需要指定它们......）：

package.json

  "devDependencies": {
    [...]
    "grunt-karma": "~0.9.0",
    "karma": "~0.12.24",
    "karma-jasmine": "~0.2.3",
    "karma-chrome-launcher": "~0.1.5",
    "karma-phantomjs-launcher": "~0.1.4",
    "karma-spec-reporter": "0.0.13"
  }

karma.conf.js

module.exports = function (config) {
    config.set({
        frameworks: ['jasmine'],
        reporters: ['spec'],
        browsers: ['PhantomJS']
    });
};

Gruntfile.js

    karma: {
        options: {
            configFile: 'karma.conf.js',
            files: [
                'app/libs/angular.js',
                'app/libs/angular-resource.js',
                'app/libs/angular-route.js',
                [...] 
                'app/modules/**/*-spec.js'
            ]
        },
        unit: {
            singleRun: true
        }
    }

现在，当我运行 grunt karma 时，来自 *-spec.js 文件 (describe('message', function() ...)) 的消息会很好地显示在控制台中。

【讨论】：

【解决方案3】：

另一个细节 - 如果您在 karma.config.js 中保留默认报告器“进度”，如下所示：

reporters: ["progress", "spec"]

或其他控制台报告器，“规范”报告器输出将不起作用。

您应该只保留“规范”之一，或与其他浏览器报告者一起保留“规范”。例如：

reporters: ["spec", "coverage"]

【讨论】：

没错，有同样的问题。记者：["spec", "coverage"] 有效

【解决方案4】：

您也可以使用Karma-mocha-reporter 作为记者，您应该在控制台中有一份干净的报告。

npm i karma-mocha-reporter --save-dev

// karma.conf.js
module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],

    // reporters configuration
    reporters: ['mocha']
  });
};

有时，例如在@angular/cli 环境中，您应该这样要求：

plugins: [
   ...
   require('karma-mocha-reporter'),
   ...
]

【讨论】：

【解决方案5】：

我写了一个记者以使输出更具可读性：karma-helpful-reporter

有一些不错的自定义选项：https://github.com/whyboris/karma-helpful-reporter

里面的安装说明，基本上是npm install --save-dev karma-helpful-reporter然后添加到Karma配置插件部分：

plugins: [ 
  require('karma-helpful-reporter')
],
reporters: [ 'helpful' ],

【讨论】：

这真是太好了。谢谢分享。