Jest 测试成功，错误打印到控制台答案

【问题标题】：Jest test succeed with error printed to consoleJest 测试成功，错误打印到控制台
【发布时间】：2019-03-01 15:59:02
【问题描述】：

我正在尝试将jest 与@nrwl/nx 创建的Angular 项目一起使用。我已按照this 文章将我的应用从使用karma 转换为jest。

我遇到的问题是，即使我的测试通过了，出于某种原因，控制台中仍会显示以下错误：

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Error: connect ECONNREFUSED 127.0.0.1:80
    at Object.dispatchError (\node_modules\jsdom\lib\jsdom\living\xhr-utils.js:65:19)
    at Request.client.on.err (\node_modules\jsdom\lib\jsdom\living\xmlhttprequest.js:676:20)
    at Request.emit (events.js:187:15)
    at Request.onRequestError (\node_modules\request\request.js:881:8)
    at ClientRequest.emit (events.js:182:13)
    at Socket.socketErrorListener (_http_client.js:391:9)
    at Socket.emit (events.js:182:13)
    at emitErrorNT (internal/streams/destroy.js:82:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:50:3)
    at process._tickCallback (internal/process/next_tick.js:63:19) undefined

我只有一个测试，就是：

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterTestingModule } from '@angular/router/testing';

import { CommonUtilsModule } from '@lib/common-utils';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule, CommonUtilsModule],
      declarations: [AppComponent]
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

由于某种原因，如果我删除以下行，控制台错误不会显示：

const fixture = TestBed.createComponent(AppComponent);

我已经查看了几个小时的错误，但似乎无法弄清楚是什么原因造成的。我没有在我的测试或组件中执行任何 http 请求，所以不知道为什么它说 ECONNREFUSED。

以前有人遇到过这个错误吗？

谢谢

【问题讨论】：

标签： angular jestjs nrwl

【解决方案1】：

当您尝试向不可用的 localhost 服务发出请求时，此消息很常见。

让我们考虑一下我正在运行一个脚本，该脚本使用我在 localhost:80 下执行的 node.js 服务。如果我的节点实例没有运行，我会收到类似你的消息。

我认为发生的事情是您已将端口设置为检查 80，通常更常见的是默认端口为 8080。

【讨论】：

感谢您的回答。我没有设置任何端口。我所做的只是运行 ng 测试。无论如何，不确定它试图提出什么请求。
不用担心。我理解您的观点，但了解错误的来源可以帮助您跟踪问题。它甚至可能是您正在执行的额外脚本，因为该文件位于测试文件夹下。你有测试spect文件和触发错误的行吗？

【解决方案2】：

如angular.io 所述，关于compileComponents：

在完成配置后异步编译测试模块。如果任何测试模块组件具有 templateUrl 或 styleUrls，则必须调用此方法，因为获取组件模板和样式文件必须是异步的。见上文。

调用 compileComponents 后，TestBed 配置在当前规范期间被冻结。

所以 Jasmine 和 Angular 原生使用 fetch 来获取 HTML，并且必须调用 compileComponents 才能使这些 HTML 文件可访问。

我不确定为什么这是必要的，但 JSDOM 显然无法处理。

我建议您使用包 jest-preset-angular，它负责使用自定义处理器处理此问题。

确保您按照他们的 README.md 中的设置说明进行操作，因为在撰写此评论时设置有点不稳定，并且不要过多地修改 jest 配置。 ts-jest 正在重写，预设没有赶上最新版本。我强烈建议您仅通过 npm 安装 jest 和预设，以免您的工作区中没有不兼容的 ts-jest 版本。这很关键，因为ts-jest 不遵循语义版本控制。

另外需要注意的是，断点只有在你使用--runInBand/-i 运行 jest 时才会起作用。如果您运行--watch，则在带中运行将不起作用，并且断点只会命中，如果您只测试一个文件（您可以使用文件名正则表达式模式来实现）。多个文件将在多个进程中进行测试，我猜这不是在检查模式下运行，并且 vscode/您最喜欢的调试器无法连接到。

【讨论】：