Angular Unit testing : Failed: Unexpected value 'DxTemplateHost' imported by the module 'DynamicTestModule': Add a @NgModule annotation

Viewed 12272

Am implementing a simple unit test for my Component .

  • i imported everything necessary : services , RouterModuleTesting ,FormsModule HttpModule ...

  • Wanna note that I'm using DevExtreme Widgets.

but again , i confront some strange error :

the error says that i should add a @NgModule annotion somewhere , but it's not clear.

My test file is the following :

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CustomersListComponent } from './customers-list.component';
// DevExtreme Module
import {DxTemplateHost} from 'devextreme-angular';
// Router Testing Module
import {RouterTestingModule} from '@angular/router/testing';
// Services and HTTM Module
import { CustomerService } from './../customer.service';
import {HttpService} from '../../../shared/service/http.service';
import {SessionService} from '../../../shared/service/session.service';
import {HttpModule} from '@angular/http';
// Forms Module (ngModel)
import {FormsModule} from '@angular/forms';
// Schemas(datasource error)
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ CustomersListComponent ],
      imports: [
        HttpModule,
        FormsModule,
        DxTemplateHost,
        RouterTestingModule,
      ],
      providers: [ CustomerService , SessionService , HttpService ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();
  }));

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

  it('Customer-list component should be well defined', () => {
    expect(component).toBeDefined();
  });
});

When running Karma serve , the test falis and throws this :

Failed: Unexpected value 'DxTemplateHost' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.
    Error: Unexpected value 'DxTemplateHost' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.
        at syntaxError (webpack:///~/@angular/compiler/@angular/compiler.es5.js:1690:21 <- src/test.ts:117724:34)
        at webpack:///~/@angular/compiler/@angular/compiler.es5.js:15383:0 <- src/test.ts:131417:44
        at Array.forEach (<anonymous>)
        at CompileMetadataResolver.Array.concat.CompileMetadataResolver.getNgModuleMetadata (webpack:///~/@angular/compiler/@angular/compiler.es5.js:15366:0 <- src/test.ts:131400:49)
        at JitCompiler.Array.concat.JitCompiler._loadModules (webpack:///~/@angular/compiler/@angular/compiler.es5.js:26796:25 <- src/test.ts:142830:70)
        at JitCompiler.Array.concat.JitCompiler._compileModuleAndAllComponents (webpack:///~/@angular/compiler/@angular/compiler.es5.js:26782:0 <- src/test.ts:142816:36)
        at JitCompiler.Array.concat.JitCompiler.compileModuleAndAllComponentsAsync (webpack:///~/@angular/compiler/@angular/compiler.es5.js:26714:0 <- src/test.ts:142748:37)
        at TestingCompilerImpl.Array.concat.TestingCompilerImpl.compileModuleAndAllComponentsAsync (webpack:///~/@angular/compiler/@angular/compiler/testing.es5.js:478:0 <- src/test.ts:232778:31)
        at TestBed.Array.concat.TestBed.compileComponents (webpack:///~/@angular/core/@angular/core/testing.es5.js:739:0 <- src/test.ts:40380:31)
        at Function.Array.concat.TestBed.compileComponents (webpack:///~/@angular/core/@angular/core/testing.es5.js:622:45 <- src/test.ts:40263:67)

Suggestions ??

3 Answers

What went wrong for me was accidentally placing services inside the imports array when it should have been in the providers array.

After moving services to the providers array, it worked out fine :)

I solved the problem by looking into the html of my component and searched for every *dxTemplate usage. There I found that I use the <dx-tooltip> but I haven't listed the DxTooltipModule in the imports in my test file.

So make sure that you import every DevExtreme module, that you use.

Related