前言

测试主要分为三种：单元测试、集成测试、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。

原文链接：https://juejin.cn/post/7347910930472271924 作者：Zzzyc