如何修复“错误：预期在 'ProxyZone' 中运行，但未找到。”在摩卡测试？答案

【问题标题】：How to fix "Error: Expected to be running in 'ProxyZone', but it was not found." in mocha testing?如何修复“错误：预期在 'ProxyZone' 中运行，但未找到。”在摩卡测试？
【发布时间】：2019-09-25 19:11:51
【问题描述】：

我正在尝试使用 mocha、chai 和测试我的英雄之旅 Angular 应用程序webpack。我关注了this post 并在this guide 的帮助下完成了设置并修复了构建错误并启动并运行了测试。

但是，我的测试失败了，除了我没有在 beforeEach 钩子中使用 async() 的测试用例。

通过测试

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [HeroService, MessageService]
    });
    httpTestingController = TestBed.get(HttpTestingController);

    let mockHeroes = [...mockData];
    let mockHero = mockHeroes[0];
    // let mockId = mockHero.id;

    heroService = TestBed.get(HeroService);
  });

  afterEach(() => {
    httpTestingController.verify();
  });

  it('is created', () => {
    expect(heroService).to.exist;
  });

测试失败

//imports
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { DashboardComponent } from './dashboard.component';
import { HeroSearchComponent } from '../hero-search/hero-search.component';

import { RouterTestingModule } from '@angular/router/testing';
import { HeroService } from '../hero.service';
import { expect } from 'chai';

...

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [DashboardComponent, HeroSearchComponent],
      imports: [RouterTestingModule.withRoutes([])],
      providers: [{ provide: HeroService, useValue: heroService }]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DashboardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should be created', () => {
    expect(component).to.exist;
  });

错误堆栈跟踪

1) 仪表板组件

  "before each" hook for "should be created":
Error: Expected to be running in 'ProxyZone', but it was not found.
 at Function.ProxyZoneSpec.assertPresent (node_modules\zone.js\dist\proxy.js:42:19)
 at runInTestZone (node_modules\zone.js\dist\async-test.js:202:23)
 at D:\Practice\Tour-Of-Heroes\node_modules\zone.js\dist\async-test.js:185:17
 at new ZoneAwarePromise (node_modules\zone.js\dist\zone-node.js:910:29)
 at Context.<anonymous> (node_modules\zone.js\dist\async-test.js:184:20)

我尝试过Angular 5 Testing: Expected to be running in 'ProxyZone', but it was not found，因为我认为这是 zone.js 使用 mocha 的一些错误，但没有成功。

另外，我曾尝试关注Mocha Documentation 进行异步测试，但作为初学者，这对我来说有些困难。

我尝试过用谷歌搜索，甚至在 stack-overflow 中搜索过，但是关于 Angular 测试 和 的帖子数量有限>摩卡。感谢您提供任何帮助解决此问题。

【问题讨论】：

我今天遇到的第 5 个 Angular 特定错误。这个框架真是太费时间了。

标签： angular typescript unit-testing mocha.js mocha-webpack

【解决方案1】：

2021

添加以下行作为第一次导入规范文件为我解决了这个问题：

import 'zone.js/dist/zone-testing';

【讨论】：

【解决方案2】：

我在这里看到了一些问题。

您有 2 个 beforeEach。你应该只有 1 个。如果您的测试代码块有异步，那么您需要在函数上调用 await，和/或使用 flush 或 tick 来推进时间。我通常将 fakeAsync 用于可观察对象，将 async/await 用于真正的异步方法。

对于这个特定示例，您根本不需要异步。

【讨论】：

在 Karma/Jasmine 测试中拥有多个 beforeEach 是可以的。此外，由于compileComponents 返回一个承诺，OP 需要其中的await，或者使用waitForAsync

【解决方案3】：

我在 describe 函数中意外使用 fakeAsync 时遇到了同样的问题。

删除它为我解决了问题。

【讨论】：

这是我的问题。我偶然将 fackAsync() 放在了我的 describe() 函数周围，而不是放在了 it() 函数周围。
? 1 周内我第二次需要打开 Google 才能看到这篇 SO 帖子?

【解决方案4】：

这是这个问题的答案。

Angular 5 Testing: Expected to be running in 'ProxyZone', but it was not found

基本上这个异常是因为 async 关键字的位置不正确。从 beforeEach 中删除 async 并将其添加到“it”

it('should be created', fakeAsync(() => {
    expect(component).to.exist;
  });

【讨论】：

【解决方案5】：

我遇到了同样的问题，从beforeEach（和it）中删除async 解决了这个问题。错误消息根本没有帮助，但我想从它生成的地方来检测根本原因并不容易。

【讨论】：

是的，问题是我需要测试异步代码，并且在进入该部分时删除异步不是一个选项。