Angular 6 + Universal Karma testing importing modules

Question

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.

Answer 1

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

Answer 2

I know this is an old one but, in case someone else comes here looking …

Angular automagically adds a /src/test.ts- by default it looks something like this:

declare const require: any;

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

Here you can add any global modules - for instance the FormsModule like so:

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  [
    BrowserDynamicTestingModule,
    MatIconTestingModule, // Say i'm annoyed that tests fail whenever I add an icon.. I'll add this here
    NoopAnimationsModule,
    // Add any additional modules here
  ],
  platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

This list shouldn't be that big - generally you want your specs to be self-contained but I find this to be a practical way to avoid repeating the same imports over and over