How to fix “zone is not defined” in this project

问题

I've migrated a project from Node 6 to Node 10 and in the process made some changes and version upgrades which resulted in failing test cases and whatever fixes I tried, the test are still failing on "ReferenceError: Zone is not defined"

I've tried changing the versions of different dependencies incrementally from basic to latest and still the tests would not pass.

Here is the Package json:

 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "ng build --prod --env=prod",
    "test": "npm run test:jest",
    "test:jest": "jest --coverage",
    "test:jest:watch": "jest --watch --coverage",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "package-version": "node utils/package-version-check.js",
    "pretest": "npm run package-version"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "4.1.3",
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@angular/router": "4.1.3",
    "angular2-jwt": "0.2.3",
    "bootstrap": "4.0.0-alpha.6",
    "core-js": "2.4.1",
    "font-awesome": "4.7.0",
    "jest-bamboo-formatter": "1.0.1",
    "lint": "0.7.0",
    "moment": "2.18.1",
    "ng": "0.0.0",
    "ng2-toastr": "4.1.2",
    "npm": "6.9.0",
    "primeng": "4.1.3",
    "run": "1.4.0",
    "rxjs": "5.5.2",
    "sonarqube-scanner": "2.0.2",
    "test": "0.6.0",
    "xmlhttprequest": "1.8.0",
    "zone.js": "0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.6.0",
    "@angular/cli": "6.0.0",
    "@angular/compiler-cli": "4.1.3",
    "@angular/language-service": "4.1.3",
    "@types/angular": "1.6.39",
    "@types/core-js": "2.5.2",
    "@types/jest": "21.1.8",
    "@types/node": "6.0.60",
    "babel-jest": "23.4.0",
    "codelyzer": "3.2.0",
    "eslint-plugin-jest": "21.17.0",
    "jasmine-core": "2.6.2",
    "jasmine-spec-reporter": "4.1.0",
    "jest": "23.4.1",
    "jest-cli": "23.4.1",
    "jest-preset-angular": "4.0.1",
    "jest-sonar-reporter": "1.3.0",
    "node-sass": "4.9.4",
    "ts-node": "3.2.0",
    "tslint": "5.7.0",
    "typescript": "2.4.2"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "./src/setupJest.ts",
    "testEnvironment": "node",
    "testURL": "http://localhost/",
    "globals": {
      "window": {}
    },
    "testResultsProcessor": "./resultProcessor",
    "coverageReporters": [
      "json",
      "lcov",
      "text"
    ],
    "verbose": true,
    "collectCoverage": true
  },
  "jestSonar": {
    "reportPath": "reports",
    "reportFile": "ut_report.xml",
    "indent": 4,
    "sonar56x": true
  } 

Here is the tsconfig:

  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "baseUrl": "src",
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "commonjs",
    "removeComments": false,
    "noImplicitAny": false,
    "skipLibCheck": true,
    "types": [
      "jasmine",
      "node",
      "core-js",
      "selenium-webdriver"
    ]
  },
  "include": [
    "src/**/*.ts",
    "node_modules/@types"
  ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
}

and here is the setupjest.ts

import 'jest-preset-angular';
import './jestGlobalMocks'; 

A Test that is failing:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA, DebugElement } from '@angular/core';
import { DlTableComponent } from './dl-table.component';
import { DocService } from '../doc.service';
import { ConnectionBackend, Http, HttpModule, RequestOptions } from '@angular/http';
import { AuthService } from '../auth.service';
import { NotificationsService } from '../notification.service';
import {ToastOptions, ToastsManager} from 'ng2-toastr';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpModule
      ],
      declarations: [ DlTableComponent ],
      providers: [
        DocService, Http, ConnectionBackend, AuthService, NotificationsService,
        ToastsManager, ToastOptions,
        { provide: RequestOptions, useObject: {} }
      ],
      schemas: [NO_ERRORS_SCHEMA]
    })
    .compileComponents();
  }));

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

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

I expect this error to be gone and the tests run smoothly.

回答1:

Maybe you should to add the following code at the beginning your src/test.ts

import 'zone.js/dist/zone';
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';

回答2:

According to this Github issue the problem should be solved by fixing the karma paths like this:

basePath: '../',
files: [
  'node_modules/zone.js/dist/zone.js',
  'node_modules/zone.js/dist/long-stack-trace-zone.js',
  'node_modules/zone.js/dist/proxy.js',
  'node_modules/zone.js/dist/sync-test.js',
  'node_modules/zone.js/dist/jasmine-patch.js',
  'node_modules/zone.js/dist/async-test.js',
  'node_modules/zone.js/dist/fake-async-test.js',
]

or like this, when you don't want to change the basePath:

basePath: '',
files: [
  '../node_modules/zone.js/dist/zone.js',
  '../node_modules/zone.js/dist/long-stack-trace-zone.js',
  '../node_modules/zone.js/dist/proxy.js',
  '../node_modules/zone.js/dist/sync-test.js',
  '../node_modules/zone.js/dist/jasmine-patch.js',
  '../node_modules/zone.js/dist/async-test.js',
  '../node_modules/zone.js/dist/fake-async-test.js',
]

来源：https://stackoverflow.com/questions/56704662/how-to-fix-zone-is-not-defined-in-this-project