Angular 2 Karma 测试“组件名称”不是已知元素

IT技术 javascript node.js angular typescript karma-jasmine
2021-01-23 07:30:23

在 AppComponent 中，我在 HTML 代码中使用了导航组件。用户界面看起来不错。执行 ng serve 时没有错误。当我查看应用程序时，控制台中没有错误。

但是当我为我的项目运行 Karma 时，出现错误： 

Failed: Template parse errors: 
'app-nav' is not a known element:
1. If 'app-nav' is an Angular component, then verify that it is part of this module.
2. If 'app-nav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

在我的app.module.ts 中：

有：

import { NavComponent } from './nav/nav.component';

它也在 NgModule 的声明部分

@NgModule({
  declarations: [
    AppComponent,
    CafeComponent,
    ModalComponent,
    NavComponent,
    NewsFeedComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    JsonpModule,
    ModalModule.forRoot(),
    ModalModule,
    NgbModule.forRoot(),
    BootstrapModalModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

我NavComponent在我的AppComponent

app.component.ts

import { Component, ViewContainerRef } from '@angular/core';
import { Overlay } from 'angular2-modal';
import { Modal } from 'angular2-modal/plugins/bootstrap';
import { NavComponent } from './nav/nav.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angela';
}

应用程序组件.html

<app-nav></app-nav>
<div class="container-fluid">
</div>

我看到了一个类似的问题，但该问题的答案说我们应该在导航组件中添加 NgModule，该组件具有导出功能，但是当我这样做时出现编译错误。

还有：app.component.spec.ts

import {NavComponent} from './nav/nav.component';
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
6个回答

因为在单元测试中，您希望测试的组件大部分与应用程序的其他部分隔离，所以 Angular 默认不会添加module的依赖项，如组件、服务等。因此，您需要在测试中手动执行此操作。基本上，您在这里有两个选择：

A) 在测试中声明原始的 NavComponent

describe('AppComponent', () => {
  beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent,
          NavComponent
        ]
      }).compileComponents();
    }));

B) 模拟 NavComponent

describe('AppComponent', () => {
  beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent,
          MockNavComponent
        ]
      }).compileComponents();
    }));

// it(...) test cases 

});

@Component({
  selector: 'app-nav',
  template: ''
})
class MockNavComponent {
}

您可以在官方文档中找到更多信息。

谢谢...为我工作！
2021-03-23 07:30:23
谢谢你。我遇到了必须导入多个组件和module的问题，AppModule以至于只在 TestBed 配置中导入更有意义。你会反对这个吗？
2021-03-25 07:30:23
@jonathan 也许您声明的组件有自己的依赖项？在单元测试中，最好使用模拟。
2021-03-29 07:30:23
有什么方法可以配置日志记录以显示测试名称或显示导致这些消息的规范的任何相关信息？
2021-04-04 07:30:23
文档已移至angular.io/guide/...。
2021-04-11 07:30:23

你也可以使用 NO_ERRORS_SCHEMA

describe('AppComponent', () => {
beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [
      AppComponent
    ],
    schemas: [NO_ERRORS_SCHEMA]
  }).compileComponents();
}));

https://2018.ng-conf.org/mocking-dependencies-angular/

这就是测试文档所说的：“NO_ERRORS_SCHEMA 还可以防止编译器告诉您您无意中遗漏或拼写错误的缺失组件和属性。您可能会浪费数小时去寻找编译器会立即捕获的幻影错误。”
2021-03-27 07:30:23
您绝对不会在单元测试中引入额外的隐式行为：使用 NO_ERRORS_SCHEMA 会鼓励您将依赖项放入“模拟”和“拉入”之间的“灰色”区域。对这些依赖项的任何更改都可能触发看似无关的单元测试的中断——不好
2021-03-28 07:30:23
是否有任何潜在的问题会由此产生？这似乎是一个方便的修复，但是否有任何重要的错误将被消除？
2021-04-04 07:30:23

对我来说，在父级中导入组件解决了这个问题。

describe('AppComponent', () => {
  beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent,
          NavComponent
        ]
      }).compileComponents();
    }));

在spec of the parent使用此组件的地方添加它。

还有一个原因是，可以有多个.compileComponents()用于beforeEach()在你的测试用例

例如

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [TestComponent]
  }).compileComponents();
}));

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [HttpClientModule],
    declarations: [Test1Component],
    providers: [HttpErrorHandlerService]
  }).compileComponents();
});

步骤 1：在规范文件的开头创建存根。

@Component({selector: 'app-nav', template: ''})
class NavComponent{}

第 2 步：在组件的声明中添加存根。

TestBed.configureTestingModule({
  imports: [
    RouterTestingModule
  ],
  declarations: [
    AppComponent,
    NavComponent
  ],
}).compileComponents();
其它你可能感兴趣的问题
上一篇我如何在 Rx Observable 上“等待”？ 下一篇强制网站仅以横向模式显示