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

Posted 2023-02-22

【中文标题】MutationObserver 上的 Angular 指令单元测试失败：参数 1 不是“节点”类型

【英文标题】：Failing Angular directive unit test on MutationObserver: parameter 1 is not of type 'Node'

【发布时间】：2018-12-21 20:23:35

【问题描述】：

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

我遵循了官方文档和这个很好的解释：https://***.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。非常感谢任何建议。

【参考方案1】：

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

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

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