手把手带你玩转vue单元测试

Posted 2021-04-16 前端达人

随着前端工程化的发展，前端自动化测试逐渐兴起，可以很好的保障你的项目质量，已是进阶高级前端的必备技能，9月8日一起玩转Vue单元测试，更贴近实际工作的课程，全面提升你的核心竞争力！

【扫码一起免费学习，限150人！】

单元测试是什么

维基百科：单元测试是针对 程序的最小单元 来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。一个单元可能是单个程序、类、对象、方法等。
通俗百科：单元测试，是为了测试某一个类的某一个方法能否正常工作，而写的测试代码。

单元测试的意义

减少bug、提高代码质量、快速定位bug、减少调试时间、放心重构。

单元测试的目的

当你的项目足够大的时候，在叠加模块和组件的过程中，是很有可能影响之前的模块。但是被影响的模块已经通过了测试，我们在迭代的时候，很少有测试人员会去重新测试这个系统。所以， 被影响的模块很可能就有了一个隐形的bug被部署到线上。因此我们采用自动化测试。最主要的作用是对于大型项目，在每次迭代的时候， 可以保证整个系统的正确运行， 确保系统的健壮。

当前vue框架的选择

vue官方推荐一个叫做karma的自动化测试，它产生一个 Web 服务环境来运行项目代码，并且执行测试，该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。换句话说，它是一个测试工具，能让你的代码在浏览器环境下测试。

搭建基于vue框架的单元测试

在创建项目之前，你还需要了解Mocha和Chai。
Mocha是一个 javascript 测试框架，就是运行测试的工具。通过它，可以为JavaScript应用添加测试，从而保证代码的质量，mocha里的常用命令和用法不算太多，可以看阮老师的《测试框架 Mocha 实例教程》就可以大致了解。
Chai是一个 Mocha 可以使用的断言库，就是判断源码的实际执行结果与预期结果是否一致。具体可以参考《简书·Chai.js断言库API中文文档》。