javascript - 单元测试错误 - 失败:Angular 中模块“DynamicTestModule”声明的意外值“[object Object]”
问题描述
我已经搜索了堆栈上的其他问题,试图为这个问题找到解决方案,但它们似乎都没有意义或工作。我收到错误消息: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 { }
主页视图.html
<app-header></app-header>
<app-content></app-content>
<app-news></app-news>
<app-footer></app-footer>
有任何想法吗?
解决方案
您正在尝试测试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();
});
});
推荐阅读
- python - 从 jupyter notebook 中的 csv 导入 dd.mm.yyy 格式的日期
- javascript - 将此与 React Hooks 一起使用
- java - 如何在java中比较两个大的CSV文件
- mysql - 编写一个 SQL 查询来查找给定表的最高薪水
- java - SpringBoot - 为演示创建空测试类
- ruby - 传出的 Websocket 消息未发送到浏览器
- django - 对实例 ID 'i-04e3dd1fd8a1663c3' elasticbean django 部署的命令执行不成功
- node.js - Typescript + Worker Threads的Nodemon抛出错误
- django - 在 django 中调用时,张量不是该图的元素
- python - 从特定列中的数组在熊猫数据框中插入两个值