前端单元测试框架怎么选

测试主要分为三种单元测试、集成测试、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 等一下子这么多工具我们该用哪个呢什么时候需要引入其实原则上就是缺什么我们就用什么基本思路就是凑齐测试运行器 支持断言、仿真、快照等功能框架有的直接用框架的没有的就引入对应功能的库即可。主流的测试工具Karmakarma是一个测试运行器Test Runner与Jest使用JSDOM 模拟浏览器环境不同 karam能在多种真实的浏览器中测试代码一般会配合 Mocha 或 Jasmine 等测试框架一起使用 并且支持 webpack 和 Babel 的配置。MochaMocha 是使用最广泛的单测框架。功能非常丰富支持运行在 Node.js 和浏览器中 对异步测试支持非常友好但是他需要较多的配置来实现它的高扩展性。常用搭配 Karma Mocha chai断言 sinon仿真快照功能需要额外配置。JasmineJasmine是单测框架的“元老”。支持断言、仿真、快照功能开箱即用但是异步测试支持较弱。Augular 的默认测试框架就是Karma Jasmine。JestJest 基于 Jasmine, 做了大量修改并添加了很多特性同样开箱即用支持断言、仿真、快照和异步测试。React 的默认测试框架是 JestVitestVitest 是一个专门为 Vite 构建的测试运行器。它与 Vite 构建工具结合紧密旨在提供一个简单且高效的测试解决方案适用于在 Vite 项目中进行单元测试。Vitest 涵盖了 Jest 所有功能支持对 Vue、React、Svelte、Lit等框架进行组件测试。AvaAva 是更轻量高效简单的单测框架支持断言、快照、异步测试和并发运行测试。TapeTape是比Ava更小更轻的测试框架你可以像代码一样跑测试十分的简单易用。要完成一个单元测试首先我们需要一个测试运行环境让测试可以在真实或虚拟的浏览器跑起来然后我们需要一个测试框架提供Api 让我们编写测试脚本BDD或TDD并且需要一个断言库来判断测试代码的实际执行结果与预期结果是否一致如果是测试React/Vue的话还需要搭配各自的测试工具来更加方便测试组件更完善一点我们可能还需要仿真和快照功能如果可以支持异步测试那就更好了。TDD测试驱动开发Test-Driven DevelopmentTDD 则要求在编写某个功能的代码之前先编写测试代码然后只编写使测试通过的功能代码通过测试来推动整个开发的进行BDD行为驱动开发Behavior-Driven DevelopmentBDD 可以让项目成员甚至是不懂编程的使用自然语言来描述系统功能和业务逻辑从而根据这些描述步骤进行系统自动化的测试常用的测试搭配有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。最后下方这份完整的软件测试 视频教程已经整理上传完成需要的朋友们可以自行领取【保证100%免费】​​​软件测试面试文档我们学习必然是为了找到高薪的工作下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料并且有字节大佬给出了权威的解答刷完这一套面试资料相信大家都能找到满意的工作。