TestingCompilerFactory 没有提供者！在 Angular 2 Jasmine 测试中

Question

我正在使用@angular/upgrade 将 Angular 1 应用程序升级到 Angular 2。在大多数情况下，这进展顺利。我现在有一个 Angular 2 组件，可以在手动测试时在我的 Angular 1 应用程序中运行。

但是，到目前为止，我还无法成功地对 Angular 2 组件进行单元测试。我的代码如下所示：

app.ts

import "./polyfills";
import "./app.helpers";
import * as angular from "angular";
import "reflect-metadata";
import {UpgradeAdapter, UpgradeAdapterRef} from "@angular/upgrade";
import { NgModule } from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";

import {initRoutes} from "./app.routes";
import {initComponents, components} from "./app.components";
import {initServices, services} from "./app.services";
import {initHttpConfig} from "./app.http-config";

@NgModule({
    imports: [BrowserModule],
    declarations: [].concat(components),
    providers: [].concat(services)
})
class AppModule {}

export const upgradeAdapter = new UpgradeAdapter(AppModule);

const app = angular.module("App", [/*ng1 modules*/]);

initHttpConfig(app);
initRoutes(app);
initComponents(app);
initServices(app);

angular.element(document).ready(() => {
    upgradeAdapter.bootstrap(document.body, ["App"]);
});

export default app;
export const ng = angular;

spec-entry.ts

import "./polyfills";
import "zone.js/dist/long-stack-trace-zone";
import "zone.js/dist/proxy.js";
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";
import {getTestBed} from "@angular/core/testing";
import {BrowserTestingModule, platformBrowserTesting} from "@angular/platform-browser/testing";

getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting());

interface WebpackRequire extends NodeRequire {
    context(dir: string, includeSubdirs: boolean, matchFiles: RegExp) : any;
}

const wpRequire = require as WebpackRequire;

const testsContext = wpRequire.context(".", true, /\.spec\.ts$/);
testsContext.keys().forEach(testsContext);

我的组件.ts

import "../app.ts";
import {
    async,
    inject,
    TestBed,
} from "@angular/core/testing";
import * as moment from "moment";
import {CollegeEvent} from "../models/college-event.model";
import {MyComponent} from "./my.component";

describe("My component", function () {
    let fixture;
    let component;
    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent],
        });

        fixture = TestBed.createComponent(MyComponent);
        component = fixture.debugElement.componentInstance;
    });

    it("should not throw an error", () => {

    });
});

在运行我的测试时，我收到以下错误：

1) Error: No provider for TestingCompilerFactory!

任何帮助将不胜感激。

Answer 1

这可能是由于您的客户端目录中有多个 node_modules 文件夹。它可以存在于您的 node_modules 文件夹中或其他文件夹中。当您从外部复制代码或解压缩 node_modules 文件夹并创建另一个重复文件夹时，有时会发生这种情况。

Angular 会在 node_modules 内部进行检查以进行测试，并且可能会发现多次出现相同的情况。

Answer 2

主要问题是您需要在beforeEach 中为组件中的所有服务声明提供者。

在您的规范中尝试以下代码。我不确定您的应用程序中的 TestingCompilerFactory 是什么，但您可能需要模拟它。 Check out the docs.

let comp: MyComponent;
let fixture: ComponentFixture<MyComponent>;

describe("My component", () => { 
   beforeEach(() =>  {
      TestBed.configureTestingModule({
        declarations: [ MyComponent ],
        providers: [
           // DECLARE PROVIDERS HERE
          { provide: TestingCompilerFactory }
        ]
      }).compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(MyComponent);
        comp    = fixture.componentInstance;
      });
    }));
    it("should not throw an error", () => {
      // not sure how you are storing your errors, this is just an example spec
      expect(comp.errors).toEqual([]);
    }));
});