Question

我已经将项目从节点6迁移到节点10，并且在此过程中进行了一些更改和版本升级，导致测试用例失败以及我尝试的任何修复，测试仍然失败，原因是“ ReferenceError：未定义区域“

我尝试将不同依赖项的版本从基本更改为最新，但仍然无法通过测试。

这是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
  }

这是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"
    ]
}

这是setupjest.ts

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

测试失败：

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();
  });
});

我希望这个错误不会消失，并且测试可以顺利进行。

Answer 1

也许您应该在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';

Answer 2

根据this Github issue，应通过修复以下业力路径来解决该问题：

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',
]

或者这样，当您不想更改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',
]

如何修复此项目中的“未定义区域”

2 个答案: