使用 Jasmine 进行 Angular5 测试。组件是 2 个模块声明的一部分：AppModule 和 DynamicTestModule答案

【问题标题】：Angular5 Testing with Jasmine. Component is part of the declarations of 2 modules: AppModule and DynamicTestModule使用 Jasmine 进行 Angular5 测试。组件是 2 个模块声明的一部分：AppModule 和 DynamicTestModule
【发布时间】：2018-10-28 03:25:10
【问题描述】：

我正在编写第一个测试并处理此错误：

错误：类型 SearchComponent 是 2 个模块声明的一部分：AppModule 和 DynamicTestModule！请考虑将 SearchComponent 移至导入 AppModule 和 DynamicTestModule 的更高模块。您还可以创建一个新的 NgModule，它导出并包含 SearchComponent，然后将该 NgModule 导入 AppModule 和 DynamicTestModule。

在我的应用程序中，我只有一个模块：AppModule.ts。并且 SearchComponent 仅在此处声明。如果我创建第二个模块（又名 ChildModule）并将 SearchComponent 移到那里，错误消息将具有相同的内容，但模块的名称将从 AppModule 更改为 ChildModule。我拥有的每个组件都有相同的错误。

如果我从 spec 文件中的导入中删除 AppModule，并添加 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();
  }));
});

【问题讨论】：

因为您将整个 AppModule 带入测试，它已经声明了 SearchComponent，然后再次声明 SearchComponent。这就是错误消息告诉您的内容。要么不要再次声明该组件，要么最好不要将所有内容都导入TestBed - 如果您的整个应用程序都在其中，则测试隔离并不多。
@jonrsharpe 所以不是导入AppComponent，我应该手动导入所有必需的模块（如HttpClientModule、FormsModule等）？
单个组件不应该需要那么多其他模块 - 例如，HttpClientModule 应该只有 services 需要，您可以模拟组件使用的任何服务。使用NO_ERROR_/CUSTOM_ELEMENTS_SCHEMA，您可以进行浅渲染以消除对任何子组件的依赖。我建议您阅读测试指南：angular.io/guide/testing。

标签： angular unit-testing testing jasmine

【解决方案1】：

请从您的 Search.component.spec.ts 中删除 AppModule

您的测试使用来自 TestBed 的 TestingModule (DynamicTestModule)。显然，您在配置 TestingModule 时声明了您的 SearchComponent，同时您导入了您还声明了您的 SearchComponent 的 AppModule。这会导致错误消息。

【讨论】：