我正在做一个我们最近在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的步骤如下：
1.安装Jest本身
npm安装-D笑话笑话预设Angular @类型/笑话ts笑话
1.从package.json中删除所有karma/jasmine库
1.更新了tsconfig规范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"
  ]
}

1.添加jest.配置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>/'
  })
};

1.删除karma.conf.js
1.从angular.json中的架构师中删除测试
1.从./src中删除测试. ts
1.变更"试验"："ng检测"变更为"检测"："笑话"
1.在./src中添加了安装代码：

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-builder/jest，但到目前为止没有一个工作。我有一种感觉，也许过渡到使用常春藤渲染器造成的问题，但我不确定。我似乎找不到任何人在谷歌上有同样的问题，所以这使我StackOverflow。有人知道如何修复错误吗？
[编辑]
我在https://github.com/kayvanbree/jest-problem中创建了问题的最小预生产
[编辑]
这个问题的答案没有帮助的方式：How to fix "zone is not defined" in this project

3条答案

按热度按时间

8yoxcaq71#

原来这是一个版本的问题。
我安装了：

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

看起来这两个版本并不想一起工作，它也给出了一个警告，jest 26还没有和ts-jest一起测试过。
将Jest降级为^25.0.0修复了该问题。

赞(0）回复(0）举报 2023-01-28

mf98qq942#

请尝试添加“提供：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.

fdx2calv3#

尝试在 jest.config.js 中将testEnvironment设置为jsdom

module.exports = {
  preset: 'jest-preset-angular',
  displayName: 'your-application-name',
  testEnvironment: 'jsdom', // <--- set the testEnvironment to jsdom
  ...
}

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

3条答案

相关问题

热门标签

最新问答