angularunit-testingcomponentsangular-ngselecttestbed

Angular TestBed: Can't bind to 'ngModel' since it isn't a known property of 'ng-select'


I'm trying to use TestBed from to test a Angular component that has a ng-select in its HTML. I've first got the error saying that Can't bind to 'items' since it isn't a known property of 'ng-select'. so I've imported NgSelectModule and added it to imports in TestBed configurations. It now returns Can't bind to 'ngModel' since it isn't a known property of 'ng-select'

import { getTestBed, TestBed } from '@angular/core/testing';
import { ProductGenericGridComponent } from './product-generic-grid.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ProductGridService } from './product-generic-grid.service';
import { NgSelectModule } from '@ng-select/ng-select';
import { ProductItemComponent } from './../product-item/product-item.component';

describe('Product Generic Grid Component', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [ProductGenericGridComponent],
            imports: [HttpClientTestingModule, NgSelectModule],
            providers: []
        });
    });

    afterEach(() => {
        getTestBed().resetTestingModule();
    });

    it('should return true', () => {
        const fixture = TestBed.createComponent(ProductGenericGridComponent);
        expect(true).toBe(true);
    });
});

Solution

  • Import the forms module into your testbed.

        TestBed.configureTestingModule({
            declarations: [ProductGenericGridComponent],
            imports: [HttpClientTestingModule, NgSelectModule, FormsModule],
            providers: []
        });