前端组件库js单元测试应选vitest，配happy-dom环境支持dom操作，配置vitest.config.ts启用test.environment='happy-dom'、test.include和test.globals，编写原生dom测试用例并统一清理，集成ci脚本与eslint插件。

前端组件库开发中配置 JS 单元测试环境，核心是选对测试框架、配好运行时环境、支持 DOM 操作，并适配项目结构。不需要全栈式堆砌工具，重点在于轻量、稳定、可维护。

选型：Vitest 是当前主流首选

相比 Jest，Vitest 启动更快、API 更简洁、原生支持 ESM 和 TypeScript，且与 Vite 生态无缝衔接。组件库通常需频繁启动/调试测试，Vitest 的 watch 模式响应迅速，适合高频迭代场景。

• 安装命令：npm install -D vitest @vitest/coverage-v8
• 若组件含 DOM 操作（如按钮点击、模态框显示），必须指定环境：environment: 'happy-dom'，它会在内存中模拟完整 DOM API，无需真实浏览器
• Nx Monorepo 中，每个子包可独立配置 vitest.config.ts，避免全局污染

基础配置：最小可用 vitest.config.ts

一个能跑通原生 JS 组件（比如 Button.js）的配置只需几行关键项：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

• test.environment = 'happy-dom' —— 必须启用，否则 document.createElement 等会报错
• test.include = ['src/**/*.{test,spec}.js'] —— 明确匹配 JS 测试文件，不混入 TS 或 Vue SFC
• test.globals = true —— 启用全局断言（describe/it/expect），省去反复 import
• 如需覆盖率，加 coverage: { provider: 'v8', reporter: ['text', 'html'] }，结果自动输出到 coverage/

测试写法：面向原生 JS 组件的典型模式

不依赖框架封装，直接操作 DOM 节点和事件，验证行为是否符合预期：

• 创建实例：const el = document.createElement('my-button');
• 设置属性：el.textContent = 'Submit'; el.disabled = true;
• 挂载并检查渲染：document.body.appendChild(el); expect(el.querySelector('button')).toHaveAttribute('disabled');
• 触发交互：el.querySelector('button').click(); expect(el).toHaveClass('clicked');
• 清理 DOM：document.body.innerHTML = '';（建议在 afterEach 中统一执行）

配套脚本与工程集成

让测试真正融入日常开发流程：

• 在 package.json 中添加："test": "vitest"、"test:watch": "vitest --watch"、"test:ci": "vitest run --coverage"
• CI 环境下禁用 UI 渲染（如 GitHub Actions），可加 CI=1 环境变量自动跳过图形相关逻辑
• 配合 ESLint 插件 @vitest/eslint-plugin，防止测试代码中误用未声明的全局变量

不复杂但容易忽略：环境变量和 DOM 清理要写进配置或公共 setup 文件，而不是每个测试里重复写。一次配好，长期受益。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！