I am currently in the process of setting up a basic unit test for my Angular application, specifically an Ionic application. Utilizing a preconfigured solution by the Ionic team with karma/jasmine, the provided sample unit tests passed successfully. Encouraged by this, I proceeded to write a new unit test for my custom provider.
However, I encountered a roadblock when I realized there was no existing sample to refer to. Undeterred, I created a TestBed and included the necessary components as one would in a typical application. Yet, with each run of the unit test, I was confronted by a rather cryptic error message:
Error: Illegal state: Could not load the summary for directive TestServiceProvider.Error: Illegal state: Could not load the summary for directive TestServiceProvider.
at syntaxError (webpack:///node_modules/@angular/compiler/esm5/compiler.js:486:21 <- karma-test-shim.js:66892:34)
at CompileMetadataResolver.getDirectiveSummary (webpack:///node_modules/@angular/compiler/esm5/compiler.js:15085:0 <- karma-test-shim.js:81491:31)
at JitCompiler.getComponentFactory (webpack:///node_modules/@angular/compiler/esm5/compiler.js:34301:25 <- karma-test-shim.js:100707:63)
Upon examining the stack trace, it appears to be triggered by a SyntaxError. Yet, the root cause and solution elude me. Any insights into what may be the issue in this scenario?
import { TestServiceProvider } from './test';
import { TestBed, TestModuleMetadata, async, ComponentFixture } from '@angular/core/testing';
describe('Test Service', () => {
let component: TestServiceProvider;
let fixture: ComponentFixture<TestServiceProvider>;
beforeEach(async( () => {
TestBed.configureTestingModule({
providers: [TestServiceProvider]
}).compileComponents;
}));
beforeEach( () => {
fixture = TestBed.createComponent(TestServiceProvider);
component = fixture.componentInstance;
});
it('should add numbers', () => {
expect(1+1).toBe(2);
});
});
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
/*
Generated class for the TestServiceProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class TestServiceProvider {
constructor() {
console.log('Hello TestServiceProvider Provider');
}
}