在 Angular 9 中迁移到 Jest 会出现“未定义区域”错误答案

【问题标题】：Migrating to Jest in Angular 9 gives "Zone is not defined" error在 Angular 9 中迁移到 Jest 会出现“未定义区域”错误
【发布时间】：2020-09-05 11:35:18
【问题描述】：

我正在处理一个我们最近在 Angular 9 中启动的项目，该项目是使用 Angular CLI 生成的。我想使用 Jest 而不是 Karma 来运行我的测试，因为在我看来，在你的构建管道中设置 Karma 的工作量太大（几年前我浪费了很多时间试图让 Karma 运行）。

我在尝试运行 Jest 时遇到错误：

ReferenceError: Zone is not defined

      at node_modules/zone.js/dist/zone.js:670:5
      at performance (node_modules/zone.js/dist/zone.js:8:9)
      at Object.<anonymous> (node_modules/zone.js/dist/zone.js:9:2)

我安装 Jest 的步骤是：

自行安装 Jest

npm install -D jest jest-preset-angular @types/jest ts-jest

从 package.json 中移除所有 karma/jasmine 库
更新了 tsconfig.spec.json：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest",
      "node"
    ],
    "esModuleInterop": true,
    "emitDecoratorMetadata": true
  },
  "files": [
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

添加 jest.config.js：

const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig');

module.exports = {
  preset: 'jest-preset-angular',
  roots: ['<rootDir>/src/'],
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  setupFilesAfterEnv: ['<rootDir>/src/setupJest.ts'],
  collectCoverage: true,
  coverageReporters: ['html'],
  coverageDirectory: 'coverage/my-app',
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
    prefix: '<rootDir>/'
  })
};

删除 karma.conf.js
从 angular.json 中的架构师移除测试
从 ./src 中删除 test.ts
将“test”：“ng test”改为“test”：“jest”
在 ./src 中添加了 setupJest.ts：

import 'jest-preset-angular';

Object.defineProperty(window, 'CSS', {value: null});
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance']
    };
  }
});

Object.defineProperty(document, 'doctype', {
  value: '<!DOCTYPE html>'
});
Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true
    };
  }
});

运行失败的测试示例如下：

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

import { MenuComponent } from './menu.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MenuComponent ]
    })
    .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

我不知道我做错了什么。我尝试了几个教程，还有一个使用@angular-builders/jest，但到目前为止都没有。我有一种感觉，使用 Ivy 渲染器的过渡可能会导致问题，但我不确定。我似乎在 Google 上找不到任何有同样问题的人，所以这把我带到了 StackOverflow。这里有人知道如何修复错误吗？

[编辑]

我在https://github.com/kayvanbree/jest-problem创建了我的问题的最小预生产

[编辑]

顺便说一句，这个问题的答案没有帮助：How to fix "zone is not defined" in this project

【问题讨论】：

标签： angular jestjs angular9

【解决方案1】：

请尝试在您的 configureTestingModule 中添加“provide: NgZone”：

    beforeEach(async(() => {
       TestBed.configureTestingModule({
         declarations: [ MenuComponent ],
         { provide: NgZone, useValue: { run(fn): any { return fn(); } }},
       })
       .compileComponents();
    }));

如果效果不好：

只是一个快速测试：您可以将此“noop”配置添加到您的应用引导程序中吗？

platformBrowserDynamic()
    .bootstrapModule(AppModule, { ngZone: 'noop' })
    .catch(console.error});

请在 polyfill.ts 中注释掉这一行

// import 'zone.js/dist/zone';  // Included with Angular CLI.

【讨论】：

不幸的是，这不起作用。仍然收到Zone is not defined 错误。
如果我添加 'noop' 配置（在 main.ts 中）并注释掉 polyfill，它仍然会给出相同的错误。我在github.com/kayvanbree/jest-problem 上传了我的问题的最小复制品
我想我有东西。有一个关于 jest 26 未使用 ts-jest 测试的警告。降级到 25 并且可以正常工作。
我的回答完全错误。我会在今天晚些时候尝试找到答案。现在必须工作......

【解决方案2】：

原来这是版本问题。

我已经安装了：

"@types/jest": "^25.2.2",
"jest": "^26.0.1",

似乎这些版本不想一起工作。它还警告说 jest 26 尚未使用 ts-jest 进行测试。

将 Jest 降级到 ^25.0.0 解决了这个问题。

【讨论】：

我试过这个，但我仍然得到一个错误：找不到模块'ts-jest/utils'，你安装了什么版本的 jest-preset-angular？还是什么 ts-jest 版本？