MutationObserver 上的 Angular 指令单元测试失败：参数 1 不是“节点”类型答案

【问题标题】：Failing Angular directive unit test on MutationObserver: parameter 1 is not of type 'Node'MutationObserver 上的 Angular 指令单元测试失败：参数 1 不是“节点”类型
【发布时间】：2018-12-21 20:23:35
【问题描述】：

我正在为其中包含 MutationObserver 的指令设置一些单元测试，并在每次更改时发出事件（随着活动的 routerLink 更改）。它适用于 Angular 的 ElementRef API。

我遵循了官方文档和这个很好的解释：https://stackoverflow.com/a/37680484/6454752 并且实际上可以在测试中获取带有指令的元素：

describe('ActiveLinkChangeDirective', () => {
    let component: TestMatExpansionPanelComponent
    let fixture: ComponentFixture<TestMatExpansionPanelComponent>;
    let link
    let observed

beforeEach(fakeAsync(() => {

TestBed.configureTestingModule({
    imports: [RouterTestingModule],
    declarations: [ActiveLinkChangeDirective, 
                   TestMatExpansionPanelComponent],
    providers: [
      { provide: ElementRef, useClass: TestMatExpansionPanelComponent }],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
}).compileComponents().then(() => {

  fixture = TestBed.createComponent(TestMatExpansionPanelComponent)
  component = fixture.debugElement

  link  = fixture.debugElement.query(By.directive(ActiveLinkChangeDirective))
  expect(link).not.toBeNull()

  observed = link.injector.get(ActiveLinkChangeDirective)
  expect(observed).not.toBeNull()

  let observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => console.log(mutation.target))
  })

  observer.observe(observed, { attributes: true })

  fixture.detectChanges();
})

}))

但是，它在此处失败并出现错误 Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.：

  it('should create an instance', () => {  
      let directive = new ActiveLinkChangeDirective(component)
      expect(directive).toBeTruthy()
  });

据我了解，这个错误意味着 MutationObserver 只是没有要观察的元素，而不是专门指观察到的元素类型。我只是无法将观察到的元素的实例传递给测试中的 MutationObserver。非常感谢任何建议。

【问题讨论】：

标签： unit-testing karma-jasmine angular-directive angular6 mutation-observers

【解决方案1】：

我能够通过像这样包装 observer.observe 方法使测试通过：

let addObserver = () => {
    if (!observed) {
      tick(500)
      addObserver
      return
    }
    observer.observe(observed, { attributes: true })
}

显然该方法在异步测试中被调用得太早了。

【讨论】：