Encountered an error while attempting to test the LoginComponent
PhantomJS 2.1.1 (Linux 0.0.0): Executed 3 of 55 (1 FAILED) (0 secs / 0.307 secs)
PhantomJS 2.1.1 (Linux 0.0.0) LoginComponent should create FAILED
Failed: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("iv class="col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3">
<form (ngSubmit)="login(f)" [ERROR ->]#f="ngForm">
<div class="card card-login">
<div class="card-header text-cen"): LoginComponent@5:38
A snippet from my component code,
login.component.ts
export class LoginComponent {
isBusy: boolean = false;
user: User;
constructor(
private router: Router,
private notificationService: NotificationService,
private authService: AuthenticationService,
private sessionService: SessionService,
) { }
....
}
The corresponding spec file for the component,
login.component.spec.ts
describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
beforeEach(async(() => {
let routerStub = new RouterStub();
TestBed.configureTestingModule({
imports: [HttpModule],
declarations: [,
LoginComponent
],
providers: [{
provide: Http, useFactory: (backend, options) => {
return new Http(backend, options);
},
deps: [MockBackend, BaseRequestOptions]
},
{ provide: Router, useClass: class { navigate = jasmine.createSpy("navigate"); } },
MockBackend,
BaseRequestOptions,
AuthenticationService,
SessionService,
NotificationService
],
schemas: [NO_ERRORS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
It seems like there might be an issue with creating a mock component using the given providers and declarations. As mentioned by others in this discussion, I have already included FormsModule within the @NgModule decorator.