如何在Angular单元测试中正确获取子组件实例？

Question

我正在 Angular 中用 karma 编写单元测试，但我正在努力解决奇怪的问题。我正在尝试测试

app-source-roll-history-form

内部的

source-roll-history.dialog.ts

的输出取消。为了实现这一点，我需要子组件的实例。当我尝试获取它时，返回父组件实例而不是子组件实例。

source-roll-history-dialog.html

  <ng-template #newRollContent>
    <app-source-roll-history-form
      (save)="assignNewRoll$.next($event)"
      (cancel)="newAssignmentForm = false">
    </app-source-roll-history-form>
  </ng-template>

source-roll-history-dialog.spec.ts

  it('should show/hide form to assign new roll', () => {
  ...
    const instance = fixture.debugElement.query(By.css('app-source-roll-history-form')).componentInstance;
    console.log(fixture.debugElement.query(By.css('app-source-roll-history-form')));
    console.log(instance);
  });

console.log(fixture.debugElement.query(By.css('app-source-roll-history-form')));给了我这样的调试元素：

<app-source-roll-history-form _ngcontent-a-c295=""></app-source-roll-history-form>

所以没关系。但是当我尝试获取此组件的实例时：

fixture.debugElement.query(By.css('app-source-roll-history-form')).componentInstance

我正在获取父级的实例：

SourceRollsHistoryDialogComponent{actions$: Actions{_subscribe: observer => { ... }}, toasterService: ToasterService{toastrService: ToastrService{overlay: ...,

Answer 1

免责声明：这个答案没有解释如何获取子组件实例，但它提供了其他方法来解决后面的问题。

问题中，需要子组件的组件实例来触发子组件的输出事件。这可以通过不同的方式完成：

1. 使用用户界面触发取消事件，即执行用户必须执行的任何操作来触发此事件。 （可能这意味着点击某处的取消按钮？这将是我的首选解决方案。）

或者如果您不想与子组件交互（例如因为它的设置太复杂）：

2. 使用像ngMocks这样的模拟库来模拟子组件并从模拟的子组件中发出事件。这也使您不必在 TestBed 中声明或提供子组件的依赖项。

Answer 2

确保子组件包含在

declarations

的

TestBed.configureTestingModule

部分中。我有同样的问题，这就是解决的方法。