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 ??
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 it by importing the whole module DevExtreme :
imports:[DevExtremeModule]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With