I am currently setting up a unit testing environment using Karma and Jasmine. Here is an example:
describe('ProfileListComponent', () => {
let component: ProfileListComponent;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
[RouterModule.forRoot([])],
FormsModule
],
declarations: [
ProfileListComponent,
ProfilesFiltersComponent,
DatatableComponent,
ProfileImagePopoverComponent,
NgbHighlight,
NgbRating,
PaginationFooterComponent
],
providers: []
}).compileComponents();
TestBed.configureTestingModule({
declarations: [ ProfileListComponent ]
})
.createComponent(ProfileListComponent);
}));
it('should be 4', async(() => {
expect(component.add(2,2)).toEqual(4);
}))
});
The profile list component contains several child components that had to be imported under declarations. For instance, the ProfilesFiltersComponent uses Angular Forms as shown below:
HTML:
TS
export class ProfilesFiltersComponent implements OnInit {
filterForm: FormGroup;
}
During testing, I encountered an error regarding binding 'formGroup' in the form component:
Can't bind to 'formGroup' since it isn't a known property of 'form'
To address this issue, I added 'FormGroup' to the declarations section of the test setup:
declarations: [
...
FormGroup
]
This adjustment led to a new error:
Failed: Unexpected value 'FormGroup' declared by the module 'DynamicTestModule'. Please add a @Pipe/@Directive/@Component annotation.
At this point, I am unsure how to proceed and resolve this issue. Any insights?