前端单元测试框架怎么选

前言

测试主要分为三种：单元测试、集成测试、e2e测试。充足的测试可以让我们的代码变的更可靠，质量更高，每个前端开发都希望自己的代码测试覆盖率越高越好，但无奈业务繁忙，头发有限，最后的结局都是能做多少便做多少，todo疯狂写，做了算我输。时间有限，给项目中的基础模块做单元测试无疑是性价比最高的事情了。本文重点研究前端单元测试的选择，之后有时间再研究单元测试具体实现。

单元测试、集成测试和UI测试的区别?

• 单元测试： 又称模块测试，针对的是一个独立单元代码内部逻辑问题。通常是低耦合的组件或函数（比如一个输入框、一个按钮或一个公用的function等）。因为是低耦合的，所以单元测试的编写也是最简单且数量应该是最多的，高覆盖率的单元测试可以保证代码的质量。
• 集成测试： 在单元测试的基础上，验证多个模块集成在一起后功能是否正常，模块间的数据会不会丢失等。
• e2e测试： 与单元测试和集成测试不同，e2e测试是黑盒测试。e2e测试是站在用户的角度对整个系统进行测试，不管内部代码如何实现，只关心应用是否按预期那样运行。 在我看来，单元测试和集成测试有时很难去界定，引用React官网中的一个例子（对组件来说，"单元测试"和"集成测试"之间的差别可能会很模糊。如果你在测试一个表单，用例是否应该也测试表单里的按钮呢？一个按钮组件又需不需要有他自己的测试套件？重构按钮组件是否应该影响表单的测试用例？） 对此我认为尽量的根据自己的项目去把握单元测试的颗粒度，比如我们的项目的表单是基于ant-designed封装的，并且是作为一个基础组件使用，那么这里的表单我认为就是一个测试单元。对一些公用方法和基础组件做好单元测试，而复杂多变的业务代码可以等业务成熟后在逐步的完善测试。

技术框架选型

网上有很多好用的测试框架，Mocha、Jasmine、Jest、Vitest、Ava、Tape 等，但当我们准备大干一场时会发现有些测试框架并不是开箱即用的，还要引入断言库（如Chai），仿真（如Sinon）等，如果测试React/vue组件你还会看到vue-test-utils、Enzyme、ReactTestUtils 等，一下子这么多工具我们该用哪个呢，什么时候需要引入，其实原则上就是缺什么我们就用什么 ，基本思路就是凑齐测试运行器 + 支持断言、仿真、快照等功能，框架有的直接用框架的，没有的就引入对应功能的库即可。

主流的测试工具

• Karma：karma是一个测试运行器（Test Runner），与Jest使用JSDOM 模拟浏览器环境不同， karam能在多种真实的浏览器中测试代码，一般会配合 Mocha 或 Jasmine 等测试框架一起使用， 并且支持 webpack 和 Babel 的配置。
• Mocha：Mocha 是使用最广泛的单测框架。功能非常丰富，支持运行在 Node.js 和浏览器中， 对异步测试支持非常友好，但是他需要较多的配置来实现它的高扩展性。常用搭配 Karma + Mocha + chai（断言） + sinon（仿真），快照功能需要额外配置。
• Jasmine：Jasmine是单测框架的"元老"。支持断言、仿真、快照功能，开箱即用，但是异步测试支持较弱。Augular 的默认测试框架就是Karma + Jasmine。
• Jest：Jest 基于 Jasmine, 做了大量修改并添加了很多特性，同样开箱即用，支持断言、仿真、快照和异步测试。React 的默认测试框架是 Jest
• Vitest：Vitest 是一个专门为 Vite 构建的测试运行器。它与 Vite 构建工具结合紧密，旨在提供一个简单且高效的测试解决方案，适用于在 Vite 项目中进行单元测试。Vitest 涵盖了 Jest 所有功能，支持对 Vue、React、Svelte、Lit等框架进行组件测试。
• Ava：Ava 是更轻量高效简单的单测框架，支持断言、快照、异步测试和并发运行测试。
• Tape：Tape是比Ava更小更轻的测试框架，你可以像代码一样跑测试，十分的简单易用。

要完成一个单元测试，首先我们需要一个测试运行环境 ，让测试可以在真实或虚拟的浏览器跑起来，然后我们需要一个测试框架 提供Api让我们编写测试脚本（BDD或TDD），并且需要一个断言库 来判断测试代码的实际执行结果与预期结果是否一致，如果是测试React/Vue的话还需要搭配各自的测试工具来更加方便测试组件，更完善一点我们可能还需要仿真和快照功能，如果可以支持异步测试那就更好了。

• TDD（测试驱动开发Test-Driven Development）：TDD 则要求在编写某个功能的代码之前先编写测试代码，然后只编写使测试通过的功能代码，通过测试来推动整个开发的进行
• BDD（行为驱动开发Behavior-Driven Development）：BDD 可以让项目成员（甚至是不懂编程的）使用自然语言来描述系统功能和业务逻辑，从而根据这些描述步骤进行系统自动化的测试

常用的测试搭配有：

• Karma(测试运行器) + Mocha/Jasmine(测试框架) + Chai(断言) + Sinon(仿真)

• Jest/Vitest开箱即用，使用JSDOM 模拟浏览器环境，支持断言、仿真、快照和异步测试

Karma只是一个测试运行器，可以让你的测试运行在多种真实的浏览器中。而Jest/Vitest则是使用了JSDOM 模拟浏览器环境，大大加快了速度，但也带来了 JSDOM 的局限性与坑。

如果使用的是React框架 ，可以配合Enzyme / Test Render / react-testing-library / ReactTestUtils测试React组件，推荐使用官方提供的 react-testing-library， Enzyme 不支持 React18 了，不建议用 。

如果使用的是Vue框架 ，可以配合 vue-test-utils 测试工具来测试Vue组件

总结

综上所述，开箱即用的 Jest 和 Vitest 是首选，但是由于 Vitest 对 node 版本要求比较高（node 18 以上），笔者还是选择 Jest 作为我们的单元测试框架。如果你是用的是 Vite 并且对 node 版本没有要求，可以优先选择 Vitest。