如何在Jest中模拟HTML元素，测试调用document.createElement的函数

Jest默认搭配jsdom环境即可处理DOM相关的测试需求，针对你的场景有两种常用实现方式：

方案1：手动mock元素对象（适用于元素未插入DOM的场景） #

你可以直接创建一个仅包含业务代码用到属性的模拟对象，劫持document.createElement返回该对象后做断言即可，完整测试代码如下：

import { tryAddELement } from './你的业务代码文件路径';

it('test tryAddElement', () => {
  // 仅模拟业务代码用到的href属性即可
  const elementMock = {
    href: ''
  };
  const createElementMock = jest.spyOn(document, "createElement").mockReturnValue(elementMock);

  tryAddELement();

  // 验证createElement调用参数正确
  expect(createElementMock).toHaveBeenCalledWith('a');
  // 验证href属性被正确赋值
  expect(elementMock.href).toBe('sampleHref');

  // 测试完成后恢复原方法，避免影响其他测试用例
  createElementMock.mockRestore();
});

方案2：直接使用jsdom原生DOM（适用于元素会插入页面的场景） #

如果后续你的业务逻辑会把创建的元素插入到DOM树中，可以不需要手动mock，直接通过DOM查询做断言：

import { tryAddELement } from './你的业务代码文件路径';

it('test tryAddElement', () => {
  tryAddELement();

  // 查询是否存在对应href的a标签
  const insertedLink = document.querySelector('a[href="sampleHref"]');
  expect(insertedLink).toBeTruthy();

  // 测试完成后清空DOM
  document.body.innerHTML = '';
});

注意事项 #

• Jest 28及以上版本默认未内置jsdom，需要手动安装jsdom和jest-environment-jsdom依赖，并在jest配置中添加testEnvironment: 'jsdom'才能正常使用DOM相关API。
• 手动mock元素时不需要实现所有DOM属性和方法，仅需要覆盖当前业务逻辑用到的属性即可，后续新增逻辑时再补充对应的模拟字段。

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