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 ponent it does work, but then in another ponent 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-overviewponent';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule, MatTableModule, MatSelectModule } from '@angular/material';

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

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

  beforeEach(() => {
    fixture = TestBed.createComponent(AdminOverviewComponent);
    ponent = fixtureponentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(ponent).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.

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 ponent it does work, but then in another ponent 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.ponent';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule, MatTableModule, MatSelectModule } from '@angular/material';

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

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

  beforeEach(() => {
    fixture = TestBed.createComponent(AdminOverviewComponent);
    ponent = fixture.ponentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(ponent).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.

• javascript
• angular
• karma-jasmine
• angular-universal

2 Answers 2

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

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

In your case you have to do,

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

I know this is an old one but, in case someone else es 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