如何解决“错误:预期在'ProxyZone'中运行,但未找到。”在摩卡测试中?

时间:2019-05-08 05:38:04

标签: angular typescript unit-testing mocha mocha-webpack

我正在尝试使用 mocha chai 来测试我的Tour of Heroes Angular应用程序 webpack 。我遵循了this post并在this guide的帮助下,完成了设置并修复了构建错误并测试并运行。

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

通过测试

  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)DashboardComponent

     
  "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,因为我认为使用 mocha 导致 zone.js 出现了一些错误,但没有成功。

我还尝试遵循Mocha Documentation进行异步测试,但是作为一个初学者,这对我来说有点困难。

即使在堆栈溢出中,我也尝试过使用Google搜索,但是关于 Angular测试 的帖子数量很少,而 > 摩卡 。 感谢您的帮助。

4 个答案:

答案 0 :(得分:11)

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

删除它为我解决了这个问题。

答案 1 :(得分:0)

我遇到了同样的问题,并且从async(和beforeEach)中删除了it解决了该问题。该错误消息根本没有帮助,但是我想从生成错误消息的位置检测根本原因并不容易。

答案 2 :(得分:0)

这是这个问题的答案。

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

基本上,由于async关键字的位置错误,将导致此异常。从beforeEach中删除异步并将其添加到“ it”上

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

答案 3 :(得分:0)

我在这里看到一些问题。

您之前有2个。您只能有1。 如果您在测试代码块上存在异步,则需要在一个函数上调用await,并且/或者使用flush或tick来增加时间。 我通常将fakeAsync用于可观察对象,将async / await用于实际的异步方法。

对于此特定示例,您根本不需要异步。