JavaScript测试框架分单元、集成、E2E三类:单元测用Jest/Vitest,组件交互用Testing Library,端到端用Cypress/Playwright;选型依项目阶段与团队习惯,新项目推荐Vitest+Testing Library+Playwright组合。

JavaScript测试框架主要分三类:单元测试、端到端(E2E)测试和集成测试。选哪个取决于你测什么——函数逻辑用 Jest 或 Vitest,组件交互用 React Testing Library 或 Vue Test Utils,完整流程走 Cypress 或 Playwright。
主流单元测试框架:Jest 与 Vitest
Jest 是长期主流,开箱即用,支持快照、Mock、覆盖率报告;Vitest 是新兴选择,基于 Vite 构建,启动快、API 与 Jest 高度兼容,适合新项目或已用 Vite 的工程。
- 安装 Jest:
npm install --save-dev jest @types/jest,在package.json中配置"test": "jest" - 写一个简单测试(
sum.test.js):
const sum = (a, b) => a + b;
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
}); - Vitest 只需改命令为
vitest,配置更轻量,无需额外 Babel 或 Webpack 配置
前端组件测试:配合 Testing Library 使用
不直接操作 DOM,而是模拟用户行为(点击、输入、查询可见文本),更贴近真实使用场景。
- React 项目装:
npm install --save-dev @testing-library/react @testing-library/jest-dom - 测试按钮点击触发状态变化:
render(
);
fireEvent.click(screen.getByRole('button', { name: /increment/i }));
expect(screen.getByText(/count: 1/i)).toBeInTheDocument(); - 注意:必须在测试文件顶部加
import '@testing-library/jest-dom';才能用toBeInTheDocument()等断言
E2E 测试:Cypress 与 Playwright
适合验证整个应用流程,比如登录 → 创建订单 → 查看历史。Cypress 上手快、调试友好;Playwright 跨浏览器更强(支持 Chromium、Firefox、WebKit),运行更快,也更适合 CI 环境。
JTBC CMS(5.0) 是一款基于PHP和MySQL的内容管理系统原生全栈开发框架,开源协议为AGPLv3,没有任何附加条款。系统可以通过命令行一键安装,源码方面不基于任何第三方框架,不使用任何脚手架,仅依赖一些常见的第三方类库如图表组件等,您只需要了解最基本的前端知识就能很敏捷的进行二次开发,同时我们对于常见的前端功能做了Web Component方式的封装,即便是您仅了解HTML/CSS也
立即学习“Java免费学习笔记(深入)”;
- Cypress 安装:
npm install cypress --save-dev,运行npx cypress open启动 GUI - 写一个登录测试(
cypress/e2e/login.cy.js):
cy.visit('/login');
cy.get('[data-testid="email"]').type('user@example.com');
cy.get('[data-testid="password"]').type('123');
cy.get('form').submit();
cy.url().should('include', '/dashboard'); - Playwright 推荐用官方 CLI 初始化:
npx playwright@latest install-deps && npx playwright@latest install,生成脚本后可录制或手动编写
如何选型?看项目阶段和团队习惯
新项目推荐 Vitest + Testing Library + Playwright 组合:轻量、快、现代工具链统一;老项目已有 Jest 配置,优先延续;团队熟悉 Cypress 且重调试体验,继续用 Cypress 也没问题。
测试不是越多越好,先覆盖核心逻辑和关键路径,再逐步补全边界 case 和 E2E 场景。CI 中加入测试步骤(如 GitHub Actions 里跑 npm test 和 npx cypress run),才能真正发挥价值。









