前端单元测试框架怎么选

前言

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

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

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

技术框架选型

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

主流的测试工具

  • 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。

相关推荐
栈老师不回家5 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙11 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠15 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds35 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm