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

NGModule供参考：

@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

使用测试，您可以直接在测试中导入子组件，也可以模拟子组件。参见：

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

... 

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

}

Answer 2

此问题是由于您使用路由导入RouterTestingModule而引起的，该路由最有可能与SplashComponent相关联。

除非计划使用具体组件测试特定路由，否则不应该在RouterTestingModule上配置路由。重构为以下内容：

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

角度7：一个组件的测试失败与另一个组件相关

2 个答案: