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

MY-component.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 文件夹并创建另一个重复文件夹时，有时会出现这种情况。 / p>

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

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

2 个答案: