迁移到Angular 9中的Jest会显示“未定义区域”错误

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。这里有人知道如何解决该错误吗？

我正在研究一个我们最近在Angular 9中启动的项目，该项目是使用Angular CLI生成的。我想使用Jest而不是Karma来运行测试，因为我认为Karma太多了，无法设置...

Answer 1

请尝试在您的configureTestingModule中添加“提供：NgZone”：

迁移到Angular 9中的Jest会显示“未定义区域”错误

问题描述投票：0回答：1

1个回答

最新问题

迁移到Angular 9中的Jest会显示“未定义区域”错误

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1