【单测】单测入门 A Beginner's Guide to Writing Unit Tests for React Components with Jest and React Testing Library

作为一个初学者，第一次接触单测的时候，我其实有很多疑问，单测是什么，为什么要做单测，如何做单测，最佳实践是什么。

怎么罗列测试用例，如何调试代码

本文就是一篇浅浅的入门指南。主要围绕上面这些问题做一些解答和记录。

单测是什么

单测就是单元测试，属于软件开发中的一个测试方法。正如其名字一样，单元测试关注的是代码中比较小的单元，可能是一个函数，一个方法，甚至一个属性。只要在逻辑上可以独立存在的，都是单元测试可进行的对象。

Why

减少上线bug，可以保证我们写的代码按照预想的执行。同时，对于代码维护也可得带来更高效率。

How

主要围绕如何进行javascript代码的单元测试讲解。（单元测试是软件工程里的概念，不应该只局限与前端，由于网上的资源看起来很繁杂，我暂时没有建立起一个完整的单测认识，所以这篇文章暂时只局限于unit test with javascript）

选择一个测试框架JavaScript unit testing framework

关于js的单测框架，目前使用最多的是Jest 和mocha，下面这张图给出了2016年到2021年框架使用比例图。（主要是js的发展很快，所以基于js的工具也要不断迭代和更新）

Untitled

如果第一次接触单测，肯定要选择使用最多的，因为参考资料多，不管是学习好还是开发过程中遇到问题，都能很容易找到相关的资料。还有一个好处是，使用多意味着这个工具被维护的可能性更高且更持久。

Jest测试框架

有两个网站我推荐看，我相信会有很多收获。

Getting Started · Jest

Jest Tutorial - JavaScript Unit Testing Using Jest Framework

Jest Tutorial: Complete Guide to Jest Testing

第三个文档我只简易看目录。具体内容我觉得他写的很简陋，所以不简易看。

首先根据官网的文档，可以着手写一个简单的单元测试。测试总的来说就是输入-预测输出-判断结果的过程（input - expected output - assert the result）

我认为一个技术官网上的东西初学的时候不需要全部看完，技术官网是一个工具网站，我们可以把他看成是一个字典，遇到不认识的字的时候再使用它。对于一个技术网站，首先就是要快速了解这个技术最基本的几个东西是什么，比如说jest，最基本的就是如何输入命令使用、积累一些常用的matchers。如何判断哪些最基本，你可以根据js的基本知识来学习，在学js的时候，逻辑运算、字符串什么都是是常用的，所以学习jest的时候你需要了解一些对应的匹配器；页面上的交互经常涉及到一些click,change事件，这是jest有一些mock函数需要了解。等等。

测什么

How do I know what to test?当你对jest有个初步的实操之后，下一个关注的问题是测什么？

如果是写一个页面的话，页面上每个组件、每个交互理论上都需要测试。如果自己罗列，难免有遗漏的地方，所以在jest中有个coverage的概念（Code coverage in Jest），可以把它理解为Jest的一个命令或者工具，可以告诉我们代码中哪些需要测的地方。执行完这个命令后，甚至有一个可视化的Html页面可以直观地看到测试覆盖率。