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

Question

I have searched the other questions on stack to try and get a solution for this issue, but none of them either seem to make sense or work. I am getting the error: Failed: Unexpected value '[object Object]' declared by the module 'DynamicTestModule' I have tried adding the RouterTestingModule.withRoutes in my imports, as that seems to be the solution but that has not fixed the issue, My code so far is:

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 module

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>

Any idea's?

Answer 1

You are trying to test the HomeComponent , so you will only need the imports and declarations related to the HomeComponent , you don't have to import all the application.

For the nested component, we can mock them like this: https://angular.io/guide/testing#stubbing-unneeded-components

In conclusion, your HomeComponent Spec File should be:

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