断言角单元测试中存在父组件 [英] Asserting that a parent component exists in angular unit test

问题描述

我有一个顶级组件AppComponent，在它的template属性中，它在页面上呈现了<child>元素. (<child>是另一个Angular组件).

I have a top level component AppComponent and in it's template property it renders the <child> element on the page. (<child> is another Angular component).

我是否需要告诉单元测试忽略<child>元素或以某种方式对其进行声明以进行测试?

Do I need to tell the unit test to ignore the <child> element or declare it in some way for the test?

我实际上并没有尝试在此测试文件中测试<child>，我将创建一个单独的单元测试文件以验证其功能.

I'm not actually trying to test <child> in this test file, I will create a separate unit test file to validate it's functionality.

app.module.ts

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChildComponent } from './child.component';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent, ChildComponent],
  imports: [BrowserModule]
})
export class AppModule { }

app.component.ts

app.component.ts

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

@Component({
  selector: 'app',
  template: '<child></child>'
})
export class AppComponent { }

child.component.ts

child.component.ts

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

@Component({
  selector: 'child',
  templateUrl: './child.component.html'
})
export class ChildComponent { }

app.component.spec.ts

app.component.spec.ts

import { async, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { ChildComponent } from './child.component';

describe('App', (() => {
  beforeEach(async() => {
    TestBed.configureTestingModule({ declarations: [AppComponent, ChildComponent] }).compileComponents();
  }));
  it('should work', () => {
    let fixture = TestBed.createComponent(AppComponent);
    // assert app.component exists
  });
});

运行单元测试时，出现此错误:

When I run the unit test, I'm getting this error:

Error: This test module uses the component ChildComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Please call "TestBed.compileComponents" before your test. in /tmp/karma-typescript-bundle-3142O76A6m7KjQOD.js (line 3929)

推荐答案

该错误表明测试中涉及其他单元(ChildComponent).此错误是由ChildComponent使用templateUrl引起的，并且此类组件可能需要调用compileComponents进行编译.

The error indicates that other units (ChildComponent) are involved in test. This error is caused by the fact that ChildComponent uses templateUrl, and such components may need to call compileComponents to compile them.

由于AppComponent具有template而不是templateUrl，因此这使得测试同步并且使async辅助程序不必要，也消除了使用compileComponents的需要.

Since AppComponent has template and not templateUrl, this makes a test synchronous and makes async helper unnecessary, also eliminates the need to use compileComponents.

指南中所述，

TestBed.compileComponents方法异步编译在测试模块中配置的所有组件.在此示例中，BannerComponent是唯一要编译的组件.当compileComponents完成时，外部模板和css文件已内联"，并且TestBed.createComponent可以同步创建BannerComponent的新实例.

The TestBed.compileComponents method asynchronously compiles all the components configured in the testing module. In this example, the BannerComponent is the only component to compile. When compileComponents completes, the external templates and css files have been "inlined" and TestBed.createComponent can create new instances of BannerComponent synchronously.

单元测试假定只测试一个单元，而其他单元则被忽略，存根或模拟.这样可以使测试保持隔离状态.

Unit test presumes that only one unit is tested, while other units are ignored, stubbed or mocked. This allows to keep a test isolated.

由于未声明的组件将导致错误，因此必须将其存根:

Since undeclared components will result in error, they have to be stubbed:

  beforeEach(() => {
    @Component({ selector: 'child', template: '' })
    class DummyChildComponent {}

    TestBed.configureTestingModule({ declarations: [AppComponent, DummyChildComponent] });
  });

CUSTOM_ELEMENTS_SCHEMA或NO_ERRORS_SCHEMA可以替代虚拟组件，它们不适用于测试，因为任何可能的错误输出可能都很有价值.而自定义架构是更重量级的解决方案.

An alternative to dummy component is CUSTOM_ELEMENTS_SCHEMA or NO_ERRORS_SCHEMA, which aren't suitable in tests because any possible error output may be valuable. And custom schema is more heavy-weight solution.

这篇关于断言角单元测试中存在父组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！