Угловой 7: Сбой теста для одного компонента связан с другим компонентом

Question

Я тестирую компонент, но тест не пройден, но причина сбоя связана с другим компонентом, который я не объявил в тесте:

FooterComponent should create
Failed: Component SplashComponent is not part of any NgModule or the module has not been imported into your module.

FooterComponent:

@Component({
  selector: 'app-footer',
  templateUrl: './footer.html',
  styleUrls: ['./footer.scss']
})
export class FooterComponent implements OnInit {
  public date: number;
  public brandName: string;

  constructor(
    private config: Configuration) {
    }

  ngOnInit() {
    this.brandName = this.config.getConfigOption('brandName');
    this.date = new Date().getFullYear();
  }

}

Тест:

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule.withRoutes(routes)
      ],
      declarations: [FooterComponent]
    })
    .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

NGМодуль для справки:

@NgModule({
  declarations: [
    AppComponent,
    SplashComponent,
    FooterComponent,
   .....
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CollapseModule.forRoot(),
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [
   .....
  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

Эта же проблема повторяется для испытаний других компонентов.

РЕДАКТИРОВАТЬ: Ответы упоминают шаблон нижнего колонтитула, содержащий дочерние компоненты, они не делают. Однако, если я добавлю SplashComponent к объявлению теста, он будет работать, но тогда его место займет другой компонент.

Что-то где-то создает иерархию.

Шаблон нижнего колонтитула:

<footer>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="links">
        <ul>
          <li><a [routerLink]="['/support']">Support</a></li>
          <li><a [routerLink]="['/terms']">Terms & Privacy</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="copyright">
        <p>
          &copy; {{ date }} {{ brandName}}. Made with <span class="icon-favourites"></span> by 
          <a href="" target="_blank"></a>.
        </p>
      </div>
    </div>
  </div>
</div>
</footer>

РЕДАКТИРОВАТЬ: 2

Шаблон App.component:

<app-header></app-header>
<main>
  <div class="container">
    <router-outlet></router-outlet>
  </div>
</main>
<app-footer></app-footer>

Answer 1

Проблема вызвана тем, что вы импортируете RouterTestingModule с маршрутами, скорее всего, с путем, связанным с SplashComponent.

Если вы не планируете тестировать конкретные маршруты с конкретными компонентами,Вы не должны настраивать маршруты на RouterTestingModule.Рефакторинг в следующем:

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [FooterComponent]
    })
    .compileComponents();
  }));

Answer 2

С помощью вашего теста вы можете напрямую импортировать дочерний компонент в ваш тест, ИЛИ вы можете издеваться над дочерними компонентами. См:

TestBed.configureTestingModule({
  imports: [
     ...
  ],
  declarations: [
    FooterComponent,
    MockSplashComponent,
  ],
  providers: [
    ...
  ]
})

... 

@Component({
  selector: 'app-asplash-component',
  template: ''
})
export class MockSplashComponent{

}