No provider for TestingCompilerFactory! in Angular 2 Jasmine tests

Question

I am working on upgrading an Angular 1 app to Angular 2 using @angular/upgrade . For the most part this has gone well. I now have an Angular 2 component that works within my Angular 1 app when manually testing.

However, so far I've been unable to successfully unit test the Angular 2 component. My code looks like the following:

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", () => {

    });
});

When running my tests I receive the following error:

1) Error: No provider for TestingCompilerFactory!

Any help would be greatly appreciated.

Answer 1

This may be due to multiple node_modules folders in your client directory. It can be present inside your node_modules folder or in other folder.This happens sometimes when you copy the code or unzip the node_modules folder from outside and another duplicate folder is created.

Angular would have been checking inside node_modules for testing purpose and might have found multiple occurrence for the same.

Answer 2

The main problem is that you need to declare a provider for your all services that are in your component in your beforeEach .

Try the following code in your spec. I'm not sure what TestingCompilerFactory is in your app, but you may have to mock it. 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([]);
    }));
});