推荐选用 Jest + jsdom 组合：Jest 开箱即用，集成断言、Mock 和覆盖率；jsdom 在 Node.js 中模拟 DOM 环境，支持无浏览器运行测试，兼顾可维护性、效率与跨框架兼容性。
前端组件库的单元测试环境要兼顾可维护性、运行效率和跨框架兼容性，核心是选对工具链、隔离组件逻辑、覆盖关键行为。不依赖具体框架（如 Vue 或 React）的纯 JS 组件库，推荐以 Jest 为主测框架，配合 jsdom 模拟 DOM 环境，再辅以合理断言和覆盖率配置。
选型与安装：Jest + jsdom 是轻量可靠组合
Jest 内置了测试运行器、断言库、Mock 工具和覆盖率收集能力，开箱即用；jsdom 提供浏览器 DOM 的 Node.js 实现，让组件能在无真实浏览器环境下完成渲染和事件测试。
- 安装基础依赖：
npm install --save-dev jest @types/jest jsdom - 在
package.json中添加脚本："test": "jest", "test:watch": "jest --watch" - 创建
jest.config.js，最小化配置如下：
module.exports = {
testEnvironment: 'jsdom',
testMatch: ['**/tests/**/*.test.js', '**/src/**/*test.js'],
setupFilesAfterEnv: ['<rootDir>/tests/setup.js'],
collectCoverage: true,
coverageDirectory: 'coverage',
coverageReporters: ['text-summary', 'lcov']
};
初始化测试环境：补充 DOM 和全局对象
jsdom 默认不提供完整的浏览器 API（如 ResizeObserver、IntersectionObserver、matchMedia），需手动补全，避免组件因调用未定义 API 而报错。
- 新建
tests/setup.js，注入常用 polyfill：
const { JSDOM } = require('jsdom');
const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
url: 'http://localhost',
pretendToBeVisual: true
});
global.window = dom.window;
global.document = dom.window.document;
global.HTMLElement = dom.window.HTMLElement;
global.ResizeObserver = class { observe() {} disconnect() {} };
global.IntersectionObserver = class { observe() {} unobserve() {} disconnect() {} };
global.matchMedia = jest.fn().mockImplementation(query => ({ matches: false, media: query }));
这样组件中常见的 DOM 查询、事件绑定、响应式判断都能安全执行。
立即学习“前端免费学习笔记（深入）”；
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
编写可复用的测试模板
JS 组件库通常导出构造函数或类（如 class Button），测试应聚焦其公共方法、DOM 输出和交互反馈。
- 示例：测试一个原生
Tooltip类是否正确插入 DOM 并显示内容
// src/tooltip.test.js
import { Tooltip } from './tooltip';
describe('Tooltip', () => {
let tooltip;
beforeEach(() => {
document.body.innerHTML = '<button id="trigger">Hover me</button>';
tooltip = new Tooltip({ trigger: '#trigger', content: 'Hello world' });
});
afterEach(() => {
tooltip?.destroy();
document.body.innerHTML = '';
});
it('renders tooltip element on show', () => {
tooltip.show();
expect(document.querySelector('.tooltip')).toBeInTheDocument();
expect(document.querySelector('.tooltip')).toHaveTextContent('Hello world');
});
it('calls onHide callback when hidden', () => {
const onHide = jest.fn();
tooltip = new Tooltip({ trigger: '#trigger', content: 'x', onHide });
tooltip.hide();
expect(onHide).toHaveBeenCalledTimes(1);
});
});
注意使用 beforeEach/afterEach 清理状态，避免测试间污染；方法级隔离比组件级挂载更贴近纯 JS 库的测试粒度。
集成进构建流程：支持 CI 与覆盖率门禁
在组件库的发布流程中，单元测试应成为必过环节。可在 CI 配置（如 GitHub Actions 或 Jenkins）中加入：
- 运行
npm test并校验退出码 - 生成覆盖率报告，用
jest --coverage --coverageThreshold={"global": {"lines": 80}}设置最低覆盖率门槛 - 将
coverage/lcov-report/index.html产物归档，便于人工审查薄弱模块
对于多包组件库（如 monorepo），建议为每个 package 单独配置 jest.config.js，并用 projects 字段统一管理，避免测试路径交叉干扰。
