测试的好处:
1.高质量的代码;
2.更早的发现bug,减少成本;
3.让重构和升级变得更加容易和可靠;
4.让开发流程更加敏捷;
这里使用到了 Jest 这个测试框架
![](https://img.haomeiwen.com/i22774661/408a32a55f5e70d7.png)
这款框架有一个对新手特别友好的地方就在于它几乎是一款零配置的测试框架,而且 create-react-app 默认使用的也是它
![](https://img.haomeiwen.com/i22774661/754f926ea8d7a7ec.png)
对于测试,有一个比较重要的概念:断言(一个值是否对应他相应的结果)
Jest 会把以下三种文件认为是测试文件:
![](https://img.haomeiwen.com/i22774661/b18be68b9626c59a.png)
如果使用了 typescript, 这里也会包含 .ts 结尾的文件
Jest使用各种匹配器(Matchers)来测试代码
先写几个简单的用例来理解:
1.最简单的测试值的方法是看是否精确匹配,匹配器:toBe
它用来测试值是否精确相等
![](https://img.haomeiwen.com/i22774661/4f231d0fd1ebfe91.png)
测试结果:
create-react-app 可以直接使用 npx jest 文件名 来运行测试文件,如果不想每次都重新敲一下命令,可以再后面加 --watch,他就会自动运行
![](https://img.haomeiwen.com/i22774661/ff94f9d079fe1fb3.png)
如果我把括号里的4改成5的话:
![](https://img.haomeiwen.com/i22774661/7ada018e207e31b8.png)
.not 关键字允许你测试结果不等于某个值的情况,写到这里有没有感觉到有点像在写英语句子?
![](https://img.haomeiwen.com/i22774661/0915801164e72e2e.png)
测试结果:
![](https://img.haomeiwen.com/i22774661/79759dd3d918d12b.png)
2.数字,大多数的比较数字有等价的匹配器
![](https://img.haomeiwen.com/i22774661/2509888dc163a2c9.png)
3.有时候需要区分 undefined, null, true, false
![](https://img.haomeiwen.com/i22774661/2589da498e455e34.png)
![](https://img.haomeiwen.com/i22774661/7a1e4677e324cf5a.png)
4.不能用 toBe 来测试对象
![](https://img.haomeiwen.com/i22774661/c3895b9f8169b1b4.png)
结果:
![](https://img.haomeiwen.com/i22774661/690ecff4b363198e.png)
测试对象应该用 toEqual
![](https://img.haomeiwen.com/i22774661/238fbc7eadf24984.png)
网友评论