如何用Jest测试单例？两种实现语法的测试差异排查

问题核心 #

两种单例实现逻辑在业务中表现一致，但测试阶段出现差异：

• 直接静态初始化写法：static instance: ListTemplate = new ListTemplate()，模块加载时就执行构造函数，此时Jest全局beforeEach还未初始化DOM，导致listItems元素获取为null，调用clear()时抛出TypeError。
• 懒加载getInstance()写法：构造函数仅在测试用例调用实例时才执行，此时DOM已完成初始化，能正常获取元素。

可行解决方案 #

方案1：延迟DOM元素获取逻辑 #

修改ListTemplate类，不在构造函数中直接获取DOM，而是在首次调用业务方法时才执行元素查询：

class ListTemplate {
  static instance: ListTemplate = new ListTemplate();
  private listItems?: HTMLElement;

  private constructor() {
    // 构造函数不做DOM操作
  }

  private getListElement(): HTMLElement {
    if (!this.listItems) {
      const element = document.getElementById('listItems');
      if (!element) throw new Error('listItems元素未找到');
      this.listItems = element;
    }
    return this.listItems;
  }

  clear() {
    this.getListElement().innerHTML = '';
  }
}

这种方式让构造函数脱离DOM依赖，首次调用clear()时DOM已经被beforeEach初始化完成，不会出现null报错。

方案2：利用Jest模块重置功能 #

在测试文件中，通过jest.resetModules()在每个测试用例前重置模块，确保ListTemplate在DOM初始化后才被加载：

beforeEach(() => {
  // 初始化DOM结构
  document.body.innerHTML = '<div id="listItems"></div>';
  // 重置所有已加载的模块
  jest.resetModules();
});

test('测试直接静态实例的clear方法', () => {
  // 动态导入ListTemplate，此时模块加载时构造函数执行，DOM已存在
  const { ListTemplate } = require('./ListTemplate');
  expect(() => ListTemplate.instance.clear()).not.toThrow();
});

注意必须使用require动态导入，不能用顶部静态import——静态导入会在测试文件加载阶段就导入模块，仍会提前执行构造函数。

方案3：依赖注入DOM元素 #

修改ListTemplate类，允许构造时传入DOM元素，测试阶段手动注入初始化后的元素：

class ListTemplate {
  static instance: ListTemplate = new ListTemplate(document.getElementById('listItems'));
  private listItems: HTMLElement;

  constructor(element?: HTMLElement) {
    const targetElement = element || document.getElementById('listItems');
    if (!targetElement) throw new Error('listItems元素未找到');
    this.listItems = targetElement;
  }

  clear() {
    this.listItems.innerHTML = '';
  }
}

测试时在beforeEach中重置静态实例的DOM元素引用：

beforeEach(() => {
  document.body.innerHTML = '<div id="listItems"></div>';
  // 替换静态实例的私有属性（或添加公共setter方法）
  ListTemplate.instance['listItems'] = document.getElementById('listItems') as HTMLElement;
});

test('测试直接静态实例的clear方法', () => {
  expect(() => ListTemplate.instance.clear()).not.toThrow();
});

这种方式提升了类的可测试性，同时保留单例特性。

方案对比 #

• 方案1：无需修改测试逻辑，仅调整类内部实现，最贴合业务场景。
• 方案2：不改动类代码，仅通过Jest API控制模块加载时机，适合快速适配测试。
• 方案3：通过依赖注入解耦DOM依赖，扩展性最强，但需要调整类的构造逻辑。

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