JavaScript测试框架有哪些以及如何使用？-js教程-PHP中文网

JavaScript测试框架有哪些以及如何使用？

紅蓮之龍

发布： 2025-12-19 22:16:55

原创

345人浏览过

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

javascript测试框架有哪些以及如何使用？

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;<br>
    test('adds 1 + 2 to equal 3', () => {<br>
      expect(sum(1, 2)).toBe(3);<br>
    });

登录后复制

Vitest 只需改命令为 vitest，配置更轻量，无需额外 Babel 或 Webpack 配置

前端组件测试：配合 Testing Library 使用

不直接操作 DOM，而是模拟用户行为（点击、输入、查询可见文本），更贴近真实使用场景。

React 项目装：npm install --save-dev @testing-library/react @testing-library/jest-dom

测试按钮点击触发状态变化：

render(<Counter />);<br>
    fireEvent.click(screen.getByRole('button', { name: /increment/i }));<br>
    expect(screen.getByText(/count: 1/i)).toBeInTheDocument();

登录后复制

注意：必须在测试文件顶部加 import '@testing-library/jest-dom'; 才能用 toBeInTheDocument() 等断言

E2E 测试：Cypress 与 Playwright

适合验证整个应用流程，比如登录 → 创建订单 → 查看历史。Cypress 上手快、调试友好；Playwright 跨浏览器更强（支持 Chromium、Firefox、WebKit），运行更快，也更适合 CI 环境。

JTBC网站内容管理系统5.0.3.1

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');<br>
    cy.get('[data-testid="email"]').type('user@example.com');<br>
    cy.get('[data-testid="password"]').type('123');<br>
    cy.get('form').submit();<br>
    cy.url().should('include', '/dashboard');

登录后复制