“预计在 'ProxyZone' 中运行，但没有找到。”开玩笑的答案

【问题标题】："Expected to be running in 'ProxyZone', but it was not found." with jest“预计在 'ProxyZone' 中运行，但没有找到。”开玩笑的
【发布时间】：2021-04-01 08:11:40
【问题描述】：

我正在将带有 Karma 的 Angular 工作区迁移到带有 Jest 的 Nx 工作区。我遇到了几个问题，其中一个是使用 fakeAsync，这会导致以下错误：

Expected to be running in 'ProxyZone', but it was not found.

因为我的应用程序使用了@ionic 和@ionic-native，所以我不得不做一些恶作剧才能让笑话发挥作用。我认为这个问题与所说的恶作剧有关，但我设法制造了一种minimal repro here。以下是重要内容：

这是我的 jest.preset.js。

const nxPreset = require('@nrwl/jest/preset');
module.exports = {
  ...nxPreset,
  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
  transform: {
    '^.+\\.(ts|js|html)$': 'ts-jest',
  },
  testEnvironment: 'jest-environment-jsdom-fourteen',
  resolver: '@nrwl/jest/plugins/resolver',
  moduleFileExtensions: ['ts', 'js', 'html'],
  coverageReporters: ['html'],
};

这是我的 jest.config.js。

module.exports = {
  preset: '../../jest.preset.js',
  coverageDirectory: '../../coverage/apps/products',
  snapshotSerializers: [
    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
    'jest-preset-angular/build/AngularSnapshotSerializer.js',
    'jest-preset-angular/build/HTMLCommentSerializer.js',
  ],
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
  globals: {
    'ts-jest': {
      tsConfig: '<rootDir>/tsconfig.spec.json',
      stringifyContentPathRegex: '\\.(html|svg)$',
      astTransformers: {
        before: [
          'jest-preset-angular/build/InlineFilesTransformer',
          'jest-preset-angular/build/StripStylesTransformer',
        ],
      },
    },
  },
  displayName: 'products',
};

最后，这是我的测试文件。

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [AppComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    }).compileComponents();
    fixture = TestBed.createComponent(AppComponent);

    fixture.detectChanges();
  }));

  // This test gives me an error.
  it('should create the app', fakeAsync(() => {
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

  // This test passes.
  it(`should render the header`, () => {
    expect(
      fixture.nativeElement.querySelector('nx-example-header')
    ).toBeTruthy();
  });
});

最后，这里是 test-setup.ts。

import 'jest-preset-angular';
import 'document-register-element';
import 'zone.js/dist/zone-testing';

这个设置对我来说似乎很普通，我不确定问题出在哪一边（nx、jest、jest-preset-angular？）。

感谢您的帮助！

【问题讨论】：

标签： angular jestjs nrwl-nx

【解决方案1】：

我设法通过从我的 test-setup.ts 文件中删除 import 'zone.js/dist/zone-testing'; 行来解决此问题。我不知道为什么这会解决它。我知道 jest-preset-angular patches 描述/测试函数，以便它们在 Zone.js 中工作。我猜 zone.js/dist/zone-testing 覆盖了补丁什么的。

【讨论】：