前端框架如何进行单元测试

前端框架单元测试实践指南

一 工具选型与组合

• 优先选择开箱即用的测试运行器与断言库：Jest（内置断言、模拟、快照、异步支持，React 生态常用）或 Vitest（与 Vite 深度集成、速度快，适合 Vite 项目）。
• 需要真实浏览器环境时使用 Karma（测试运行器）+ Mocha/Jasmine（测试框架）+ Chai（断言）+ Sinon（仿真）。
• 组件测试库：React 推荐 React Testing Library（RTL，提倡以用户行为为中心）；Vue 使用 @vue/test-utils。
• 历史项目中的 Enzyme 对 React 18+ 支持有限，新项目不建议继续采用。
• 典型组合一览：
  • React + Jest + RTL
  • Vue + Vitest + @vue/test-utils
  • 需要多浏览器/真实 DOM：Karma + Mocha/Jasmine + Chai + Sinon
  • 老项目迁移：Jest/Vitest 逐步替换原有方案
    以上选型与组合在生态、开箱即用程度、真实浏览器支持与 React/Vue 官方实践上均有成熟案例支撑。

二 快速上手步骤

• 安装依赖（以 React + Jest + RTL 为例）：
  • npm i -D jest @testing-library/react @testing-library/jest-dom
• 配置 Jest（示例 jest.config.js）：
  • module.exports = { preset: ‘ts-jest’, testEnvironment: ‘jsdom’, collectCoverage: true, coverageReporters: [‘text’, ‘html’] };
• 编写第一个测试（函数）：
  • // sum.test.js
    test(‘adds 1+2=3’, () => { expect(sum(1, 2)).toBe(3); });
• 编写组件测试（RTL）：
  • // Button.test.jsx
    import { render, screen, fireEvent } from ‘@testing-library/react’;
    import Button from ‘./Button’;
    test(‘renders with correct text’, () => {
    render();
    expect(screen.getByText(/Click me/i)).toBeInTheDocument();
    });
    test(‘calls onClick when clicked’, () => {
    const handleClick = jest.fn();
    render();
    fireEvent.click(screen.getByText(/Click me/i));
    expect(handleClick).toHaveBeenCalledTimes(1);
    });
• 运行与覆盖率：
  • 运行：npx jest 或 npx jest --watch
  • 覆盖率：npx jest --coverage（生成 HTML/文本报告）
    以上步骤覆盖从零到运行与覆盖率的标准流程，适用于大多数 React/Vue 项目。

三 框架示例 React 与 Vue

• React（Jest + RTL）：
  • 关注“用户可见行为”，用 render/screen/fireEvent 查询与交互；
  • 用 jest.fn() 断言回调调用；
  • 异步逻辑用 waitFor/异步回调配合断言。
• Vue（Vitest 或 Jest + @vue/test-utils）：
  • 安装：npm i -D vitest @vue/test-utils 或（Jest 方案）@testing-library/vue；
  • 示例（@vue/test-utils）：
    • // Button.spec.js
      import { shallowMount } from ‘@vue/test-utils’;
      import Button from ‘@/components/Button.vue’;
      import { expect } from ‘chai’;
      describe(‘Button.vue’, () => {
      it(‘renders correctly’, () => {
      const wrapper = shallowMount(Button, { props: { label: ‘Click me’ } });
      expect(wrapper.text()).to.equal(‘Click me’);
      });
      it(‘emits click event’, () => {
      const clickSpy = vi.fn(); // Vitest
      // const clickSpy = sinon.spy(); // Mocha/Chai/Sinon
      const wrapper = shallowMount(Button, { props: { label: ‘Click me’ }, listeners: { click: clickSpy } });
      wrapper.trigger(‘click’);
      expect(clickSpy).toHaveBeenCalledOnce();
      });
      });
      以上示例展示了 React 与 Vue 在组件渲染、事件、回调断言上的常见写法与差异。

四 测试范围与用例设计

• 覆盖重点：
  • 工具函数/纯函数（输入输出确定、易覆盖）；
  • 公共组件（复用度高、影响面广）；
  • 核心业务规则（如价格计算、权限判定）；
  • 组件交互与事件（点击、输入、表单提交）；
  • 异步逻辑（API 调用、定时器、错误/超时分支）；
  • 快照测试（用于 UI 稳定片段的版本化对比，避免滥用）。
• 避免事项：
  • 不过度断言 DOM 细节与实现；
  • 不把 E2E 场景放到单元测试（职责分离，E2E 用 Cypress 等覆盖）。
• 实践要点：
  • 以“行为”而非“实现”为断言目标；
  • 边界与异常输入必测（空值、非法格式、超时、网络失败）。
    这些范围与策略能在投入与收益间取得较好平衡，并提升可维护性。

五 运行、覆盖率与 CI 集成

• 本地开发：使用 –watch 增量运行，提升反馈速度；并行执行可显著缩短时长（Jest/Vitest 默认支持）。
• 覆盖率：Jest 内置 –coverage，可输出 HTML/文本 报告并设阈值；老项目用 Istanbul/nyc 也可接入。
• 持续集成：
  • 在 Jenkins/GitLab CI 中执行测试并输出 JUnit 报告；
  • 设置质量门槛（如覆盖率≥80%）并阻断不达标合并；
  • 与代码扫描、构建流程串联，保证每次提交均通过单元验证。
    以上流程可确保测试在本地与流水线中稳定、可度量、可阻断风险。