前端测试框架选型调研

最近项目有单元测试和 E2E 单元测试的需求，市面上测试框架很多，所以开启了框架的选型之路。

#Npm 每月下载量

可以看到 Jest 的下载量超过了 Mocha 很多。

Jest 的下载量较大，一部分原因是因为 create-react-app 脚手架默认内置了 Jest, 而大部分 React 项目都是用它生成的。

2025年另外的选择：Vitest 也是非常好的选择，这两年也是我的首选测试框架，它很好的继承了 Jest 的 API，开箱即用，上手和测试速度都很快，值得用一用！

从 GitHub starts & issues 以及 npm 下载量角度来看，Jest 的关注度更高。从版本迭代来看，Jest 已经更新了29个大版本，更新更为频繁。

框架	断言	异步处理	Mock	代码覆盖率
Mocha	不支持（需要安装 Chai）	友好	不支持	不支持
Jest	默认支持	友好	默认支持	支持

Mocha 需要更多的配置才能上手，相对来说 Jest 是开箱即用的，Mocha 比起 Jest 有更多社区生态（得益于社区的贡献者）。如果要想“快速”开始，那么 Jest 会是一个好选择，如果更看重社区可用的工具，那么可以选择 Mocha。

describe('Array', () => {
  it('should return -1 when the value is not present', () => {
    expect([1,2,3].indexOf(4)).toEqual(-1)
  })
})

describe('Array', function () {
  it('should return -1 when the value is not present', () => {
    assert.equal([1, 2, 3].indexOf(4), -1)
  })
})

相同的测试条件，你喜欢哪个？
笔者更喜欢 Jest 的语法（个人喜好），它的语法更加形象，Mocha 的语法感觉有点命令式编程的味道。

E2E 端到端测试：当一个稳定的业务组件（不需要经常改动），某天改动其他的业务组件后，影响到了之前稳定的业务组件，那么这个 Bug 很难被发现，因为测试人员不会来回对已经测了很多遍的页面进行测试，这时候就需要使用 E2E 测试来保证代码的稳定性。

这里选用 Cypress 和 Nightwatch 进行比较。两者都已经集成在 VueCli 中

Cypress 文档中实际上有很多关于操作的视频，能让你更快上手，并且提供了更多例子。总得来说比 Nightwatch 更易上手。

这两个产品中我更喜欢 Cypress。

在调研的路上发现 Playwright 的热度也非常高，它支持5种主流浏览器： Chorme、Edge、Firefox、Opera、Safari。并且最近在大佬 antfu 的直播新工具！前端运行时报错检查中 core 功能也主要是用 Playwright 来做的。

总之，给人的感觉非常的 magic！

笔者最终在项目中使用了 Jest 和 Cypress，它们都集成在 Vue Cli 中，如果你是 Vue Cli 创建的项目，那么你可以通过 vue add 来安装它们，配置这些事就交给 Cli 来做吧！

目前我认为 Vitest 和 Playwright 已经都很成熟了，可以作为项目的首选测试框架。