在单元测试期间无法读取 null 的属性（读取“parentElement”）答案

【问题标题】：Cannot read properties of null (reading 'parentElement') during Unit Test在单元测试期间无法读取 null 的属性（读取“parentElement”）
【发布时间】：2022-01-07 16:59:21
【问题描述】：

我正在尝试为以下功能编写单元测试：

    focusSkipButton(event: MouseEvent, isLoggedIn: boolean): void {
    if (isLoggedIn) {
      return;
    }
    const button: HTMLButtonElement = document.querySelector('.skip-btn');
    const overlay = document.querySelector('.story-viewer-login-container');
    const target = event.target as Element;
    if (event.target !== overlay &&
      (target.parentElement && target.parentElement !== overlay)) {
      button.focus();
    } 
   }

这是我想出的：

it('should set focus on skip buuton', fakeAsync(()=>{
    let button = document.createElement('button');
    spyOn(document, 'querySelector').and.returnValue(button);
    spyOn(button, 'focus');

    var event = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: true
    });

    let parent = document.createElement('div');
    let child = document.createElement('div');
    parent.append(child);
    child.dispatchEvent(event);

    component.focusSkipButton(event, false);
    tick();

    expect(button.focus).toHaveBeenCalled();

    component.focusSkipButton(event, true);
    tick();

    expect(button.focus).not.toHaveBeenCalled();
  }));

但是在运行这个测试时我得到一个错误：

Cannot read properties of null (reading 'parentElement')

我不确定我在这里缺少什么。任何帮助将不胜感激。

【问题讨论】：

标签： angular typescript unit-testing jasmine

【解决方案1】：

您在其上调度 click 事件的元素不在 DOM 中。在这种情况下，MouseEvent 上的 target 属性为空。

您可以尝试将元素添加到 DOM，但通常我会避免在没有 ViewChild 和其他 Angular 方式的情况下在 Angular 中进行 DOM 访问。

【讨论】：