Question

我正在研究一个我们最近在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预设角度@ types / jest ts-jest

从package.json中删除所有业力/茉莉花库
更新了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

Answer 1

请尝试在您的configureTestingModule中添加“提供：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.

Answer 2

结果证明这只是版本问题。

我已经安装：

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

这些版本似乎不想一起使用。它还发出警告，说明尚未对est-jest 26进行过测试。

将Jest降级为^25.0.0可以解决此问题。

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

2 个答案: