“组件应该创建”测试用例的Angular 5单元测试抛出错误答案

【问题标题】：Angular 5 Unit testing throwing error for "components should create " test case“组件应该创建”测试用例的Angular 5单元测试抛出错误
【发布时间】：2019-05-06 05:26:40
【问题描述】：

我是第一次尝试 Angular 5 单元测试。虽然我已经创建了应用程序，然后决定在其中运行测试。但我收到这些错误：

AppComponent should create the app
AppComponent should have as title 'app'
AppComponent should render title in a h1 tag
GalleryComponent should create
UploadComponent should create

以及错误详情，例如：

Failed: Template parse errors:
'app-upload' is not a known element:
1. If 'app-upload' is an Angular component, then verify that it is part of this module.
2. If 'app-upload' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" class="row">
        <div class="col-md-3" style="padding:5%; box-sizing: border-box">
            [ERROR ->]<app-upload></app-upload>
        </div>
        <div class="col-md-9">
"): ng:///DynamicTestModule/AppComponent.html@3:12

我的 package.json 开发依赖：

devDependencies": {
    "@angular/compiler-cli": "^6.0.2",
    "@angular-devkit/build-angular": "~0.6.3",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.3",
    "@angular/language-service": "^6.0.2",
    "@types/jasmine": "2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }

测试文件 app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));
  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to Typito-photo-app!');
  }));
});

我不知道如何解决这些问题。我没有对规范文件进行任何更改，也没有编写任何测试用例。根据角度文档中的描述，所有这些不应该按预期运行吗？

【问题讨论】：

你能发布你的测试文件吗？
所有测试文件都是angular使用cli创建项目时生成的默认测试文件
我应该发布哪个 spec.ts 文件，因为每个组件都有
AppComponent 的测试文件应该有帮助:)
完成。编辑。看看

标签： angular typescript unit-testing jasmine

【解决方案1】：

您要测试的组件有一个或多个child components。一个好的做法是忽略这些组件并单独测试它们。

实现这一点的一种方法是告诉您的角度 Testbed 在组件构建期间使用您的 Testbed 中的 NO_ERRORS_SCHEMA 跳过这些。

import { NO_ERRORS_SCHEMA } from '@angular/core';

那么你的测试平台应该是这样的：

TestBed.configureTestingModule({
            declarations: [
                AppComponent
            ],
            schemas: [
                NO_ERRORS_SCHEMA
            ]
        }).compileComponents();

它应该忽略出现在您的component.html 中的所有自定义元素（标签）。

另一种方法是模拟您的子组件。比如this

【讨论】：

也将其添加到导入中：import { NO_ERRORS_SCHEMA } from "@angular/core";

【解决方案2】：

您应该验证组件是否可用：

 beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
});

it('should be created', () => {
    fixture.detectChanges();
    expect(component)
        .toBeTruthy();
});

您还应该在编写测试时在测试模块中注入任何依赖项。

【讨论】：