单元测试错误 - 失败：模块'[object Object]'声明意外值 'DynamicTestModule' 在 Angular 中

Question

我已经在堆栈上搜索了其他问题，试图获得此问题的解决方案，但似乎都没有意义或工作。我收到错误：Failed: Unexpected value '[object Object]' declared by the module 'DynamicTestModule'我尝试在导入中添加RouterTestingModule.withRoutes，因为这似乎是解决方案，但这还没有解决问题，到目前为止，我的代码是：

HomeView.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContentComponent } from '../../components/content-area/content/content.component';
import { HeaderComponent } from '../../components/header/header/header.component';
import { FooterComponent } from '../../components/footer/footer/footer.component';
import { NewsComponent } from '../../components/news/news/news.component';
import { faHeadphones} from '@fortawesome/free-solid-svg-icons';
import { RouterTestingModule } from '@angular/router/testing';
import { PlaylistViewComponent } from '../../views/playlist-view/playlist-view/playlist-view.component';
import { HomeViewComponent } from './home-view.component';
describe('HomeViewComponent', () => {
let component: HomeViewComponent;
let fixture: ComponentFixture<HomeViewComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HomeViewComponent, HeaderComponent, FooterComponent, ContentComponent, NewsComponent, faHeadphones, PlaylistViewComponent],
imports: [
RouterTestingModule.withRoutes(
[{path: 'home', component: HomeViewComponent}, {path: 'playlist', component: PlaylistViewComponent}]
)
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HomeViewComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

首页视图

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../services/api.service';
@Component({
selector: 'app-home-view',
templateUrl: './home-view.component.html',
styleUrls: ['./home-view.component.scss']
})
export class HomeViewComponent implements OnInit {
public playlist = [];
constructor(private service: ApiService,
) { }
ngOnInit() {
}
}

应用程序路由模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { HomeViewComponent } from './views/home-view/home-view.component';
import { PlaylistViewComponent } from './views/playlist-view/playlist-view/playlist-view.component';

const appRoutes: Routes = [
{ path: '', redirectTo: '/home' , pathMatch:'full'},
{ path: 'home', component: HomeViewComponent},
{ path: 'playlist', component: PlaylistViewComponent},
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header/header.component';
import { FooterComponent } from './components/footer/footer/footer.component';
import { ContentComponent } from './components/content-area/content/content.component';
import { HomeViewComponent } from './views/home-view/home-view.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { NgxPaginationModule } from 'ngx-pagination';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { PlaylistViewComponent } from './views/playlist-view/playlist-view/playlist-view.component';
import { NewsComponent } from './components/news/news/news.component';
import { CarouselModule } from 'ngx-owl-carousel-o';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
ContentComponent,
HomeViewComponent,
PlaylistViewComponent,
NewsComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
HttpClientXsrfModule,
FormsModule,
NgxPaginationModule,
FontAwesomeModule,
Ng2SearchPipeModule,
CarouselModule,
BrowserAnimationsModule,
RouterModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

首页查看.html

<app-header></app-header>
<app-content></app-content>
<app-news></app-news>
<app-footer></app-footer>

有什么想法吗？

Answer 1

您正在尝试测试HomeComponent，因此您只需要与HomeComponent相关的导入和声明，而不必导入所有应用程序。

对于嵌套组件，我们可以像这样模拟它们： https://angular.io/guide/testing#stubbing-unneeded-components

总之，您的HomeComponent规范文件应该是：

import { HomeViewComponent } from './home-view.component';
import { ApiService } from '../../services/api.service';
describe('HomeViewComponent', () => {
let component: HomeViewComponent;
let fixture: ComponentFixture<HomeViewComponent>;
@Component({selector: 'app-header', template: ''})
class AppHeaderStubComponent {}
@Component({selector: 'app-content', template: ''})
class AppContenStubComponent { }
@Component({selector: 'app-news', template: ''})
class AppNewsStubComponent {}
@Component({selector: 'app-footer', template: ''})
class AppFooterStubComponent {}
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HomeViewComponent,
AppHeaderStubComponent,
AppContenStubComponent,
AppNewsStubComponent,
AppFooterStubComponent
],
providers: [ApiService]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HomeViewComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});