如何修復“錯誤：預計在 'ProxyZone' 中運行，但未找到。” 在摩卡測試中？

Question

我正在嘗試使用mocha 、 chai和webpack測試我的英雄之旅 Angular 應用程序。 我已經關注了這篇文章並在本指南的幫助下完成了設置並修復了構建錯誤並進行了測試並運行。

但是，我的測試失敗了，除了我沒有在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 測試：預計將在“ProxyZone”中運行，但沒有找到，因為我認為這是zone.js使用mocha的一些錯誤，但沒有成功。

另外，我嘗試按照Mocha 文檔進行異步測試，但作為初學者，這對我來說有點困難。

我嘗試過谷歌搜索，甚至在stack-overflow中搜索，但是關於Angular使用mocha進行測試的帖子數量有限。 感謝您提供任何幫助。

Answer 1

在describe函數中意外使用fakeAsync時，我遇到了同樣的問題。

刪除它為我解決了這個問題。

Answer 2

這是這個問題的答案。

Angular 5 測試：預期在“ProxyZone”中運行，但未找到

基本上這個異常的出現是因為 async 關鍵字的位置不正確。 從 beforeEach 中刪除 async 並將其添加到“it”

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

Answer 3

我遇到了同樣的問題，從beforeEach （和it ）中刪除async解決了這個問題。 該錯誤消息根本沒有幫助，但我想從生成它的位置來檢測根本原因並不容易。

Answer 4

我在這里看到一些問題。

你有 2 beforeEach。 你應該只有 1 個。如果你的測試代碼塊有異步，那么你需要在函數上調用 await，和/或使用刷新或滴答來進步時間。 我通常對 observable 使用 fakeAsync，對真正的異步方法使用 async/await。

對於這個特定示例，您根本不需要異步。

Answer 5

2021年

將下面的行作為第一次導入添加到規范文件為我解決了這個問題：

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

Answer 6

使用 angular 14 我們添加了導入（以修復我們的笑話設置）到

  require('zone.js');
  require('zone.js/testing');

在我們開玩笑的 setupFilesAfterEnv 文件中，但是當使用 ng test 運行時，這些導入已經由 angular 完成，導致重復導入和沖突導致上述錯誤

然后的解決方案是將進口包裝在一個條件下：

if (!('Zone' in global)){
  require('zone.js');
  require('zone.js/testing');
}