如何使用Mocha等单元测试框架测试操作DOM的自定义函数？

当然可以用你提到的那些单元测试框架来测试DOM交互的自定义函数！核心是要在Node.js的测试环境里模拟出浏览器的DOM环境——毕竟Node本身没有document、createElement这些浏览器API，而jsdom这类工具正好能帮我们解决这个问题，让你不用启动真实浏览器，就能快速验证DOM操作逻辑。

核心思路：用DOM模拟库复现浏览器环境 #

像Jest、Mocha、AVA、Jasmine、QUnit这些单元测试框架，都能和jsdom完美配合。其中Jest甚至默认集成了jsdom（部分新版本需要手动在配置里开启testEnvironment: 'jsdom'），其他框架也可以通过简单配置引入jsdom，把Node环境伪装成有DOM支持的浏览器环境，这样你的DOM操作函数就能正常执行，之后再验证结果即可。

针对你的示例函数的具体测试方案 #

首先先修正你函数里的小疏漏：createElement应该是document.createElement，不然会找不到这个方法：

let add = function() { 
  let div = document.createElement('div'); 
  div.innerHTML = '<div class="newElement">Hello World</div>'; 
  document.querySelector('body').appendChild(div);
  return div;
}

下面以Jest为例写测试代码（其他框架思路完全一致，只是断言语法略有差异）：

测试代码示例 #

// 若使用Jest 28+，需要在jest.config.js中添加配置：testEnvironment: 'jsdom'

describe('add function', () => {
  // 每个测试前清空body，避免不同测试之间的DOM状态污染
  beforeEach(() => {
    document.body.innerHTML = '';
  });

  test('返回值是HTMLElement实例', () => {
    const result = add();
    expect(result).toBeInstanceOf(HTMLElement);
  });

  test('DOM中存在class为newElement的div', () => {
    add();
    const targetElement = document.querySelector('.newElement');
    
    // 验证元素确实被添加到DOM中
    expect(targetElement).not.toBeNull();
    // 可选：额外验证元素内容符合预期
    expect(targetElement.textContent).toBe('Hello World');
  });
});

其他框架的适配参考 #

• Mocha/Chai：手动安装jsdom和jsdom-global，在测试文件开头引入require('jsdom-global')()注入全局DOM环境，断言用Chai语法，比如expect(result).to.be.an.instanceOf(HTMLElement)。
• AVA：可以使用ava-jsdom插件快速配置DOM环境，断言用t.true(result instanceof HTMLElement)。
• Jasmine：在配置中开启DOM支持，或手动引入jsdom，断言语法和Jest类似：expect(result).toBeInstanceOf(HTMLElement)。
• QUnit：通过配置QUnit.config.url或引入jsdom模拟DOM，断言用ok(result instanceof HTMLElement)。

关键注意事项 #

• 测试后清理DOM：每次测试用document.body.innerHTML = ''或者手动移除添加的元素，避免测试之间的状态干扰。
• 完全无需真实浏览器：所有操作都在Node环境的模拟DOM中完成，速度和普通单元测试一样快，完全满足你频繁执行的需求。
• 复杂DOM操作也能覆盖：比如元素移除、位置修改这类逻辑，都可以通过查询元素的存在性、父元素、位置属性等来验证。

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