Karma 启动失败 - HeadlessChrome - 错误未捕获 [object Object]答案

【问题标题】：Karma Start Fails - HeadlessChrome - ERROR Uncaught [object Object]Karma 启动失败 - HeadlessChrome - 错误未捕获 [object Object]
【发布时间】：2018-01-04 18:34:30
【问题描述】：

我正在使用 Karma 在我的 Angular 4 应用程序上运行测试。 它可以在本地运行，但是当它在我的主机环境 (Travis CI) 上运行时，它会失败并显示以下信息：

INFO [HeadlessChrome 0.0.0 (Ubuntu 0.0.0)]: Connected on socket vT0QnQaqRkn010dfsw with id 10189531

HeadlessChrome 0.0.0 (Ubuntu 0.0.0): Executed 0 of 180 SUCCESS (0 secs / 0 secs)

e 0.0.0 (Ubuntu 0.0.0): Executed 1 of 180 SUCCESS (0 secs / 0.714 secs)

HeadlessChrome 0.0.0 (Ubuntu 0.0.0) ERROR

  Uncaught [object Object]

  at http://localhost:9876/_karma_webpack_/vendor.bundle.js:14078

我尝试按照"Uncaught [object Object]" when running karma tests on Angular 的建议（删除 NPM 缓存等），但没有解决我的问题。

如何确定导致此Uncaught [object Object] 错误的原因。我应该采取哪些额外的步骤来解决问题？

【问题讨论】：

您在本地进行的第二次测试是什么？看来这在第二次测试中失败了，第一次成功了。
测试 1 只是验证 true=true，第二个测试开始验证 DOM 上的元素，我尝试禁用测试 2，然后测试 3 失败并出现相同的对象对象错误。那么，可能与 Karma 出于某种原因在 Travis CI 中没有看到 DOM 有关吗？

标签： angular karma-runner travis-ci

【解决方案1】：

这是为我解决的问题：

我在整个项目中搜索了所有 *.spec.ts 文件中出现的 HttpClientModule。原来我有几个！

然后我替换了所有出现的

import { HttpClientModule } from '@angular/common/http';

与

import { HttpClientTestingModule } from '@angular/common/http/testing';

然后我确保每个测试的TestBed.configureTestingModule 的imports 数组中的条目从HttpClientModule 更改为HttpClientTestingModule。

最后我关闭了 Wifi 并再次运行测试。瞧：它起作用了！

【讨论】：

谢谢！原来我的问题也与 HttpModule 有关，它是通过另一个模块使用的，并且没有被 HttpClientTestingModule 模拟。
我们遇到了同样的问题，但是HttpClient 和HttpHandler 的提供者不是模块。因此，您还必须检查您的规范文件中是否出现了HttpClient 和HttpHandler。删除它们并导入HttpClientModule。

【解决方案2】：

完全披露，我是解决贾斯汀这个问题的人。

问题是我们将模块导入到我们的单元测试中。这些模块有一个带有ngOnInit 的组件，它发出一个HTTP 请求。该模块将真实组件注入到测试中，并尝试发出 HTTP 请求但失败。因为它超出了正常的堆栈，堆栈跟踪给了我们非常无用的错误Uncaught [object Object]。

为了避免该问题并确保组件不被未定义，我们使用 Christian Nunciato 的有用 ng2-mock-component 库来制作一个采用所有相同输入的模拟组件。

因为被模拟的组件有自己的单元测试，我们不在乎父组件上的单元测试是否不会同时测试子组件。

【讨论】：

如果测试服务（提供者）而不是组件时出现此问题怎么办？
@BecarioSenior 听起来您正在访问另一个真实的服务，它可能正在发出 HTTP 请求或操作窗口。在创建 TestBed.configurationTestingModule 时尝试并模拟任何其他服务依赖项。类似于此处描述的内容github.com/angular/quickstart/issues/320

【解决方案3】：

在我的情况下，问题是一个组件测试，带有在其 ngOnInit 方法中进行 http 调用的子组件，没有导入 HttpClientTestingModule。如果您运行测试并在网络页面上打开 devtools，您可以检查在测试期间是否进行了 http 调用。导入模块后，在测试期间没有进行任何 http 调用。

【讨论】：

【解决方案4】：

还有另一种方法可以让你也有这个错误：

对我来说，是我忘记打电话了

    beforeEach(() => {
      TestBed.configureTestingModule({
      });
    });

我的猜测是，如果不调用它，它会从 AppModule 获取 NgModule，从而尝试导入其中导致此问题的所有模块

【讨论】：