推荐用 jsdom + 断言库在 node.js 中模拟 dom 环境测试前端函数，通过传入 document 参数解耦依赖，执行操作后断言节点数量、文本、属性等是否符合预期。
直接在真实浏览器里运行并手动点点看看，不是最可靠的办法。现代前端测试强调可重复、可断言、不依赖人工干预——所以推荐用 jsdom + 断言库 模拟 DOM 环境，在 Node.js 中完成对传统 DOM 操作函数的测试。
准备一个轻量 DOM 环境
jsdom 能把 HTML 字符串解析成标准 DOM 树，让你调用 document.querySelector、element.appendChild 等原生 API：
- 安装依赖：
npm install jsdom chai - 创建测试文件，初始化 JSDOM 实例，暴露
document和window - 确保 HTML 结构包含待操作的目标元素（如
<ul></ul>或<p id="msg"></p>）
封装被测函数并注入 document
避免函数硬编码依赖全局 document，改用参数传入，提升可测性：
- 错误写法：
function addListItem(text) { document.querySelector('ul').appendChild(...); } - 推荐写法：
function addListItem(text, doc = document) { doc.querySelector('ul').appendChild(...); } - 测试时传入 jsdom 提供的
document，完全隔离浏览器环境
编写可断言的操作逻辑
DOM 测试的核心是“执行 → 观察 → 验证”，每一步都应有明确预期：
- 执行前：检查目标容器是否为空（如
document.querySelectorAll('li').length === 0） - 执行操作：调用函数添加节点或修改文本
- 执行后：断言节点数量、文本内容、属性值、class 列表等是否符合预期
- 例如：
expect(document.querySelector('p').textContent).to.equal('你成功改变了我!');
覆盖常见 DOM 操作类型
不必为每个 API 单独写测试，按操作意图组织用例更高效：
-
读取类：验证
getElementById、querySelector是否返回正确元素 -
修改类：测试
textContent、innerHTML、classList.toggle是否生效 -
增删类：检查
createElement+appendChild后结构是否更新，removeChild是否真移除 -
事件响应类：用
element.click()触发，再验证副作用（如样式变化、状态变量更新）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
