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

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

homeview.ts

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

}

app.routing 模块

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 { }

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