CODEWITHSUNDEEP
angularunit-testingtestingjasmine
Present practice
Present practice

Reputation: 601

Angular5 Testing with Jasmine. Component is part of the declarations of 2 modules: AppModule and DynamicTestModule

I'm writing the first test and dealing with this error:

Error: Type SearchComponent is part of the declarations of 2 modules: AppModule and DynamicTestModule! Please consider moving SearchComponent to a higher module that imports AppModule and DynamicTestModule. You can also create a new NgModule that exports and includes SearchComponent then import that NgModule in AppModule and DynamicTestModule.

In my app I have only one module: AppModule.ts. And SearchComponent is declared only there. If I create a second module (aka ChildModule) and move SearchComponent there, the error message will have the same content but the name of a module will be changed from AppModule to ChildModule. I have the same error in every component I have.

If I remove AppModule from the imports in spec file, and add NO_ERRORS_SCHEMA, the error disappears.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule  } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { OtherComponentOne} from './tools/features/other-component-one.component';
import { OtherComponentTwo} from './tools/features/other-component-two.component';
import {routing} from "./app.routes";
import { environment } from '../environments/environment';
import {SearchComponent} from "./tools/features/search/search.component";
import {FilterPipe} from "./tools/shared/filter-pipe/filter.pipe";
import { SomeDirective } from './tools/shared/directives/some.directive';
import {ServiceOne} from "./tools/services/service-one.service";
import {ServiceTwo} from "./tools/services/service-two.service";

@NgModule({
  declarations: [
  FilterPipe,
  AppComponent,
  OtherComponentOne,
  OtherComponentTwo,
  SearchComponent,
  SomeDirective 
],
imports: [
  routing,
  HttpClientModule,
  BrowserModule,
  FormsModule,
  CommonModule,
  ReactiveFormsModule
],
exports: [SomeDirective ],
providers: [ServiceOne, ServiceTwo],
bootstrap: [AppComponent]
})
export class AppModule {}

Search.component.spec.ts

import {TestBed, async, ComponentFixture} from '@angular/core/testing';
import { SearchComponent } from './search.component';
import { ServiceOne} from '../../services/service-one';
import { ServiceTwo} from '../../services/service-two';
import { FilterPipe } from '../../shared/filter-pipe/filter.pipe';
import {AppModule} from "../../../app.module";

describe('Search Component', () => {
  let component: SearchComponent;
  let fixture: ComponentFixture<SearchComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        SearchComponent, FilterPipe
      ],
      imports: [AppModule], <----If I have NO_ERRORS_SCHEMA here instead of AppModule, test passes
      providers: [ServiceOne, ServiceTwo]
    });
    fixture = TestBed.createComponent(SearchComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should be initialized', async(() => {
   expect(component).toBeTruthy();
  }));
});

Upvotes: 3

Views: 5291

Answers (1)

sugarme
sugarme

Reputation: 761

Please remove AppModule from your Search.component.spec.ts

Your test using TestingModule (DynamicTestModule) which is from TestBed. Apparently, you declared your SearchComponent when configuring TestingModule in the mean time you imported AppModule that you also declared your SearchComponent. That causes error message.

Upvotes: 5

Related Questions