前端组件库js单元测试需用jsdom或happy-dom模拟dom环境，mock浏览器api与外部依赖，处理样式资源，并覆盖多环境场景。
在前端组件库建设中，JS 单元测试的环境模拟核心是让测试运行在一个可控、隔离、贴近真实浏览器行为的上下文中，尤其当组件涉及 DOM 操作、事件响应、样式计算或第三方依赖时。不需要真实浏览器，但需要“像浏览器”的环境。
确保测试能访问 DOM 和全局 API
多数 JS 组件（如原生 Web Components、轻量级 UI 工具函数、封装了 document.createElement 的渲染逻辑）依赖 DOM 接口。Node.js 默认不提供这些，所以必须显式注入：
- 使用
testEnvironment: 'jsdom'（Jest）或environment: 'happy-dom'（Vitest），二者都可在 Node 中模拟完整的 DOM API（document,window,HTMLElement,CSSStyleDeclaration等）。 - Vitest + Happy DOM 更轻量，适合纯 JS 组件或 Nx Monorepo 中按需启用；Jest + jsdom 生态更成熟，插件丰富，适合已有 Jest 工程。
例如 Vitest 配置片段：
// vitest.config.ts
export default defineConfig({
test: {
environment: 'happy-dom',
globals: true,
setupFiles: './src/test-setup.ts'
}
})
test-setup.ts 可补充全局 mock（如 matchMedia、ResizeObserver）：
// src/test-setup.ts
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation(query => ({
matches: false,
media: query,
onchange: null,
addListener: jest.fn(),
removeListener: jest.fn()
}))
});
模拟浏览器特有行为和外部依赖
组件常依赖浏览器能力（如 IntersectionObserver、getComputedStyle）或外部模块（如 fetch、工具库函数）。这些需主动 mock：
-
全局 API 模拟：用
jest.mock或vi.mock替换原生方法，返回可控结果// 测试中 mock IntersectionObserver class MockIntersectionObserver { observe = jest.fn(); unobserve = jest.fn(); disconnect = jest.fn(); } global.IntersectionObserver = MockIntersectionObserver as any; -
模块级依赖模拟：对非本项目代码（如
lodash/debounce、@floating-ui/dom）做精确 mock// 在 test 文件顶部 jest.mock('@floating-ui/dom', () => ({ computePosition: jest.fn().mockResolvedValue({ x: 0, y: 0, placement: 'bottom' }) })); -
网络请求模拟：避免真实调用，用
msw（Mock Service Worker）或jest.mock('node-fetch')// 使用 msw（推荐，支持真实请求拦截） import { setupServer } from 'msw/node'; import { rest } from 'msw'; const server = setupServer( rest.get('/api/config', (req, res, ctx) => res(ctx.status(200), ctx.json({ theme: 'dark' }))) ); beforeAll(() => server.listen()); afterEach(() => server.resetHandlers()); afterAll(() => server.close());
处理样式与资源导入问题
组件库常含 .css、.scss 或字体/图片引用，测试时需跳过或 stub：
-
Jest：在
moduleNameMapper中映射样式文件为identity-obj-proxy或空对象moduleNameMapper: { '\.(css|scss|sass|less)$': 'identity-obj-proxy', '\.(png|jpg|jpeg|gif|webp|svg)$': '<rootdir>/__mocks__/fileMock.js' }</rootdir> Vitest：使用
vi.mock或配置plugins（如vite-plugin-css-injected-by-js）配合transformMode: 'ssr'处理内联样式
支持多环境与组件状态覆盖
组件库需验证不同浏览器能力下的降级行为（如无 ResizeObserver 时回退定时器），建议：
-
用
describe.each覆盖多种环境组合describe.each([ { supportsResizeObserver: true }, { supportsResizeObserver: false } ])('Resize behavior when supportsResizeObserver = $supportsResizeObserver', ({ supportsResizeObserver }) => { beforeAll(() => { if (!supportsResizeObserver) delete (global as any).ResizeObserver; }); it('uses fallback logic', () => { /* ... */ }); }); 对关键生命周期钩子（如
connectedCallback、attributeChangedCallback）编写独立测试，确保自定义元素在模拟 DOM 中正确初始化
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
