Angular5 Тестирование с жасмином.Компонент является частью объявлений 2 модулей: AppModule и DynamicTestModule

Question

Я пишу первый тест и имею дело с этой ошибкой:

Ошибка: тип SearchComponent является частью объявлений 2 модулей: AppModule и DynamicTestModule! Пожалуйста, рассмотрите возможность перемещения SearchComponent в модуль более высокого уровня, который импортирует AppModule и DynamicTestModule. Вы также можете создать новый NgModule, который экспортирует и включает SearchComponent, а затем импортирует этот NgModule в AppModule и DynamicTestModule.

В моем приложении только один модуль: AppModule.ts. И SearchComponent заявлено только там. Если я создаю второй модуль (он же ChildModule) и перемещаю туда SearchComponent, сообщение об ошибке будет иметь такое же содержание, но имя модуля будет изменено с AppModule на ChildModule. У меня одна и та же ошибка в каждом компоненте, который у меня есть.

Если я удаляю AppModule из импорта в spec-файле и добавляю NO_ERRORS_SCHEMA, ошибка исчезает.

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();
  }));
});

Answer 1

Пожалуйста, удалите AppModule из своего Search.component.spec.ts

Ваш тест с использованием TestingModule (DynamicTestModule) из TestBed. По-видимому, вы объявили свой SearchComponent при настройке TestingModule в то время, как вы импортировали AppModule, который вы также объявили своим SearchComponent. Это вызывает сообщение об ошибке.