DynamicTestModule 在 angular 单元测试时抛出错误

Question

I'm currently creating a unit testing with Karma and Jasmine as:

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 has many childs, which is why I imported them on declarations . The ProfilesFiltersComponent uses angular Forms as:

HTML:

TS

export class ProfilesFiltersComponent implements OnInit {
 filterForm: FormGroup;
}

So, the testing asking me for the form group as:

Can't bind to 'formGroup' since it isn't a known property of 'form'

So I added it to declarations on the testing as:

 declarations: [
    ...
    FormGroup
    ]

But now it is throwing a new error:

Failed: Unexpected value 'FormGroup' declared by the module 'DynamicTestModule'. Please add a @Pipe/@Directive/@Component annotation.

That I have no idea how to solve; what am I doing wrong?

Answer 1

Remove FormGroup from declarations .

Try changing the imports to this:

imports: [
            RouterTestingModule,
            // You either need FormsModule or ReactiveFormsModule
            FormsModule,
            ReactiveFormsModule
        ],