Angular单元测试(Jasmine/Karma)报错：无法设置null的innerHtml属性

问题根因 #

这个报错触发的直接逻辑是：执行document.querySelector('div.class')时没有匹配到任何DOM节点，返回值为null，尝试给null设置属性就会抛出类型错误。结合贴出的代码，一共存在4个核心问题：

• 单元测试环境不会自动渲染业务主组件：Angular的TestBed在单独执行服务类的单元测试时，默认不会挂载项目里的主组件，主组件模板里定义的div根本不会出现在测试页的DOM树中，哪怕正式环境的html里确实写了对应类名的节点，测试环境里也拿不到。
• 代码存在多处拼写错误：
  • 服务类方法名写为onCLick（第二个字母L大写），和常规命名的onClick不一致
  • 测试文件里的测试套件关键字写为descirbe（正确为describe），测试用例关键字写为to（正确为it），这些拼写问题会导致测试用例本身无法正常被Karma识别执行
  • DOM属性拼写错误：原生DOM用于设置节点内容的标准属性是innerHTML（HTML三个字母全大写），代码里写的innerHtml是错误拼写，就算拿到DOM节点也无法正确修改内容。
• 架构写法不符合Angular规范：服务层本身的定位是处理公共数据/逻辑，不应该直接通过document.querySelector强耦合DOM结构，这种写法只要出现DOM渲染时序不对、类名修改、组件未挂载的场景，就会触发空指针报错。

排查&解决步骤 #

1. 快速修复当前测试报错 #

先修正所有拼写错误，再在测试执行前手动往测试DOM环境注入目标节点，测试完成后移除节点避免环境污染，修改后的service.spec.ts参考代码：

describe('ClickedService', () => {
  let service: ClickedService;
  let testDiv: HTMLDivElement;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(ClickedService);
    // 手动创建测试用的div节点
    testDiv = document.createElement('div');
    testDiv.className = 'class'; // 和querySelector里的类名保持一致
    document.body.appendChild(testDiv);
  });

  afterEach(() => {
    // 测完移除节点，避免影响其他用例
    testDiv.remove();
  });

  it("#onClick should add to innerHtml", () => {
    service.onClick('test value');
    // 可以加断言验证结果
    expect(testDiv.innerHTML).toBe('test value');
  });
});

同时把服务里的方法和属性拼写修正，增加空值兜底避免正式环境偶发报错：

// service.ts
onClick(value: string): void {
   const targetDiv = document.querySelector('div.class');
   if (targetDiv) {
     targetDiv.innerHTML = value;
   }
}

2. 长期重构（推荐） #

不要在服务里直接操作DOM，把DOM操作收回到持有该节点的组件内部：

• 在服务里定义响应式主题，专门用于传递需要更新的内容

// click.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ClickedService {
  private readonly contentSubject = new BehaviorSubject<string>('');
  public readonly content$ = this.contentSubject.asObservable();

  onClick(value: string): void {
    this.contentSubject.next(value);
  }
}

• 在持有目标div的主组件里，订阅服务的主题，通过模板绑定更新内容，完全不需要手动查询DOM

// 主组件代码
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ClickedService } from './click.service';
import { Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `<div class="class">{{ content }}</div>`
})
export class AppComponent implements OnInit, OnDestroy {
  content = '';
  private destroy$ = new Subject<void>();

  constructor(private clickService: ClickedService) {}

  ngOnInit() {
    this.clickService.content$
      .pipe(takeUntil(this.destroy$))
      .subscribe(val => this.content = val);
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

这种写法下服务完全不依赖DOM结构，单元测试时不需要mock任何DOM节点，只需要断言服务调用onClick时主题能正确发出对应值即可，稳定性远高于直接操作原生DOM的写法。

内容的提问来源于stack exchange，提问作者David Franklin