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