angular - 运行“ng test”时,Karma 中的元素未知错误
问题描述
当我运行时,我的项目运行良好
服务
但是当我使用运行一个简单的“tobeTruthy()”测试用例时,它显示了多个错误
测试
文件
<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple">
<p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>
<div *ngIf="isAuthenticated" class="container-fluid">
<app-app-menu></app-app-menu>
<router-outlet></router-outlet>
</div>
app.component.ts
import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { map } from 'rxjs/operators';
import { AppState } from './app.reducer';
import { UserState } from './core/store/core.state';
import * as CoreActions from './core/store/core.actions';
import { Globals } from './shared/globals';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
datetime = new Date();
title = 'curemd-x';
isAuthenticated = false;
constructor(private store: Store<AppState>, private router: Router,
private globals: Globals) {}
...
...
业力错误
"Failed: Template parse errors:
'ngx-spinner' is not a known element:
1. If 'ngx-spinner' is an Angular component, then verify that it is part of this module.
2. If 'ngx-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple">
<p"): ng:///DynamicTestModule/AppComponent.html@0:0
'app-app-menu' is not a known element:
1. If 'app-app-menu' is an Angular component, then verify that it is part of this module.
2. If 'app-app-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</ngx-spinner>
<div *ngIf="isAuthenticated" class="container-fluid">
[ERROR ->]<app-app-menu></app-app-menu>
<router-outlet></router-outlet>
</div>
"): ng:///DynamicTestModule/AppComponent.html@4:2
我还尝试包含“CUSTOM_ELEMENTS_SCHEMA”,但没有奏效。
“app-app-menu”是核心模块中存在的组件,核心模块在 app.module 中导入
app.module.ts
declarations: [
AppComponent,
FirstOrDefaultPipe
],
imports: [
RouterModule,
BrowserModule,
HttpClientModule,
PatientModule,
StoreModule.forRoot(AppReducers),
EffectsModule.forRoot([]),
CoreModule,
NgxSpinnerModule,
BrowserAnimationsModule,
DropDownsModule
],
providers: [Globals],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
我该怎么做才能为应用模块实例运行成功的测试用例?
解决方案
Angular 开发人员经常对此感到困惑。当您运行时,业力和茉莉花运行文件中ng test
定义的角度模块。.spec.ts
它根本不查看您的正常代码。因此,您输入的app.module.ts
任何内容都不会对您的测试模块产生任何影响。你可以做两件事。
添加
CUSTOM_ELEMENTS_SCHEMA
到测试模块在
app.component.spec.ts
执行以下操作
TestBed.configureTestingModule({
declarations: [
AppComponent
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}).compileComponents();
这将解决您现在遇到的错误。但是,您可能会遇到其他人,因为我已经看到您向其中注入了一些服务,AppComponent
这些服务将我们带到您可以做的下一件事情
AppModule
在测试模块中导入。您可以按如下方式导入
AppModule
。TestBed
这将确保您的测试始终具有他们需要定义的内容。如果您添加另一个组件AppModule
并在 中使用它AppComponent
,它也将在测试中可用。此外,您不需要添加CUSTOM_ELEMENTS_SCHEMA
.但是,您应该知道,这将导入和创建您在
app.component
. 有人会争辩说,这违反了单元测试的本质。您仍然可以以某种方式模拟这些服务,但它们会被渲染。此外,在 Angular 应用程序中,当测试导入的模块时RouterModule
,RouterTestingModule
会使用 , 代替。在测试中使用RouterModule
可能会弄乱您的测试,因为这些测试在无头浏览器上运行,并RouterModule
可能导致 URL 更改。
TestBed.configureTestingModule({
imports: [
AppModule
],
}).compileComponents();
推荐阅读
- python - 我们如何在 PyModbus 库中生成流量?
- sql - 如果 MV 使用 ASNI Join,查询重写失败
- javascript - Discord.js:错误告诉我命令文件不存在
- python - 无法在 matplotlib 图中设置 xlabel 和 ylabel
- google-apps-script - 根据变量的名称从数组中分配变量值
- rust - rust 迭代器的 position() 和 rposition() 有什么区别,有什么原因吗?
- git - 为什么我不能从他们的网站更改我的 Github 存储库描述?
- javascript - Javascript 中具有指定索引的 QuerySelector(如 [1])
- javascript - Nodejs 自定义类不会在车把中呈现
- c# - 包 SharePoint.Client.Runtime 15.0.0 与 netcoreapp3.1 不兼容