Angular karma jasmine 组件测试 - TestBed 必须导入/声明被测组件的子组件

Question

问题描述： 在为使用其他角度组件的角度组件编写业力/茉莉花单元测试时，我必须在测试台配置中递归地导入子组件中包含的所有组件。有没有一种方法我只需要导入被测组件的直接子代。

示例代码：

父组件模板：(top-most-parent.component.html)

<h1>This is topmost parent in the current example. It has children components</h1>
<app-direct-child #scheduleEditor 
    [param1]="val1" [param2]="val2"></app-direct-child>

直接子组件模板：(app-direct-child.component.html)：

<h1>This is first direct child in the current example. It itself has children 
components</h1>
<app-grand-child
    [aparam1]="ap1val" [aparam2]="ap2val"></app-grand-child>

大子组件模板：(app-grand-child.component.html)：

<h1>This is third level child in the current example</h1>
<p-radioButton name="dummyName" value="dummyVal" [label]="'testing"
                       [(ngModel)]="myModel" (onClick)="myOnClick()"
                       class="field-input"></p-radioButton>

问题： 在上面的示例代码中，在为最顶层的父组件编写测试用例（spec.ts）文件时，我必须导入子组件和孙子组件中使用的组件。和上面的例子一样，在为 top-most-parent.component 编写测试用例时，我必须导入 app-grand-child.component 和 p-radioButton，它们与被测组件没有直接关系。 spec文件如下

top-most-parent.component.spec.ts：请在下面的代码 cmets 中查看我的问题

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BrowserModule, Title } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';

import { DirectChildComponent } from './direct-child.component';
import { GrandChildComponent } from './grand-child.component';
import { RadioButtonModule } from 'primeng/primeng';

describe('TopMostParentComponentTestSuite', () => {
  let component: TopMostParentComponent;
  let fixture: ComponentFixture<TopMostParentComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        TopMostParentComponent,
        DirectChildComponent, // I understand, this is used by the current component under test, so this should be declared
        GrandChildComponent // But why this is needed? Is there a way this can be avoided ?
        ],

      imports: [
        RadioButtonModule // Also this is being used by grand child component, why is this import needed, is there a way this can be avoided?
      ]
    }).compileComponents();

  fixture = TestBed.createComponent(TopMostParentComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
  }));

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

Answer 1

您需要将您的夹具和组件分配到一个单独的 beforeEach 中。如下

describe('TopMostParentComponentTestSuite', () => {
  let component: TopMostParentComponent;
  let fixture: ComponentFixture<TopMostParentComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        TopMostParentComponent,
        DirectChildComponent, // I understand, this is used by the current component under test, so this should be declared
        GrandChildComponent // But why this is needed? Is there a way this can be avoided ?
        ],

      imports: [
        RadioButtonModule // Also this is being used by grand child component, why is this import needed, is there a way this can be avoided?
      ]
    }).compileComponents();

  }));

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

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

此外，如果您进行单元测试，您只需要测试您的组件。这样你就可以添加到你的 TestBed.configureTestinModule

  schemas: [ NO_ERRORS_SCHEMA ],