Angular 6 + Universal Karma testing importing modules

Issue

Problem

I'm currently trying to test my Angular 6 application with Karma, and I keep bumping into errors like the following:

Can't bind to 'ngModel' since it isn't a known property of 'mat-select'.

When I import it in this single component it does work, but then in another component I have to import it again..

Example of one of the test files now with the imports:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { AdminOverviewComponent } from './admin-overview.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule, MatTableModule, MatSelectModule } from '@angular/material';

describe('AdminOverviewComponent', () => {
  let component: AdminOverviewComponent;
  let fixture: ComponentFixture<AdminOverviewComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AdminOverviewComponent ],
      imports: [FormsModule, ReactiveFormsModule, MatFormFieldModule, MatTableModule, MatSelectModule]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AdminOverviewComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Is there a possibility to import all the modules I declared in my app.module.ts into all the modules Karma is generating?

Thank you.

Solution

Each test spec file should be independent from others. So you have to reconfigure everything (that is required for the component testing) inside each test spec file.

As far as I know, There is no such global configuration to import modules, declare components etc..

In your case you have to do,

imports : [FormsModule] in all the specs where ngModel is used

Answered By - Amit Chigadani