Jest+JSDOM环境下设置document.body.innerHTML无效测试失败求助

DevOps 小满

2026-6-24

问题描述

我编写了如下TypeScript代码，在类的构造函数中获取id为ID的DOM元素，若不存在则抛出错误：

export class MyClass {
  private myElement: HTMLElement;
  constructor() {
    this.myElement = document.getElementById("ID") as HTMLElement;
    if (!this.myElement) {
      throw new Error("myElement is missing")
    }
  }
}

对应的Jest测试代码中，我通过document.body.innerHTML添加了id为ID的div，但实例化MyClass时仍抛出“myElement is missing”错误，设置的div被忽略。我的jest.config.js配置了ts-jest预设和jsdom测试环境，package.json也包含了相关依赖。请问该如何排查此问题？

排查方案

检查DOM元素插入时机：确保在实例化MyClass之前完成document.body.innerHTML的赋值。如果测试代码里先实例化类再设置DOM，必然无法获取到元素。
验证DOM是否实际插入：在实例化MyClass前添加console.log(document.body.innerHTML)输出当前DOM结构，或者用断言expect(document.getElementById('ID')).not.toBeNull()先确认元素已存在于jsdom环境中。
核对ID拼写的一致性：注意DOM的id区分大小写，检查测试中设置的div的id是否和代码中的"ID"完全一致，避免大小写或拼写错误。
确认Jest环境配置生效：检查jest.config.js中testEnvironment是否明确设置为"jsdom"；若使用Jest 28及以上版本，需确保已安装jest-environment-jsdom依赖，且版本与Jest主版本匹配。
排查TS编译与模块导入问题：确认测试文件正确导入了MyClass，没有导入错误模块；可暂时移除as HTMLElement断言，测试是否能正常获取元素，排查类型断言是否干扰了DOM查询逻辑。
重置测试环境DOM：如果存在多个测试用例，前一个测试的DOM残留可能影响当前测试。在每个测试用例前通过beforeEach(() => { document.body.innerHTML = ''; })清空DOM，保证环境干净。