如何解决 Angular 中的单元测试用例错误答案

【问题标题】：How to resolve unit testcase error in Angular如何解决 Angular 中的单元测试用例错误
【发布时间】：2021-02-12 13:02:45
【问题描述】：

当我为组件 2 编写单元测试用例时，我收到此错误：

this.loginapp.addCustomValidation 不是函数

组件 1：

    component MainComponent {
        @viewChild('loginapp'):LoginComponent
    
        ngAfterViewInit(): void{
            this.loginapp.addCustomValidation('username','required','Enter username');
            this.loginapp.addCustomValidation('username','pattern','Enter username');
        }
    
    }

组件 2：

    component MainComponent2 extends MainComponent   {
    }

【问题讨论】：

你能发布你的单元测试代码吗？它将帮助其他人帮助您进行故障排除。我注意到的一件事是，您将 @viewChild 拼写为小写 v，而它应该是大写的，但我假设这只是此问题帖子的错字，而不是您的应用程序代码的直接副本。跨度>

标签： angular unit-testing karma-jasmine angular-unit-test

【解决方案1】：

如果您不关心在运行Component2 的单元测试时会渲染Component1，您可以使用schemas: [NO_ERRORS_SCHEMA]

从TestBed.configureTestingModule 中的declarations 中删除Component2 并添加schemas: [NO_ERRORS_SCHEMA]。

import { NO_ERRORS_SCHEMA } from '@angular/core';
....
TestBed.configureTestingModule({
  declarations: [
    Component2,
    // Component1, Remove this declaration
  ],
  schemas: [NO_ERRORS_SCHEMA],
});

NO_ERRORS_SCHEMA 基本上会忽略 Angular 不理解的元素并将它们视为死 html。

=============编辑============

TestBed.configureTestingModule({
  declarations: [
    Component2,
    Component1,
    LoginComponent,
  ],
  schemas: [NO_ERRORS_SCHEMA],
});

尝试添加 Compnent1 和 LoginComponent

【讨论】：

失败：组件 Component1 不是任何 NgModule 的一部分，或者该模块尚未导入您的模块。我收到了这个错误
这很奇怪，NO_ERRORS_SCHEMA 不应该发生这种情况。尝试将 Componet1 和 LoginComponent 添加到声明中。我进行了修改。