如何编写前端单元测试中的UI测试和功能性测试教程？

本文共计1505个文字，预计阅读时间需要7分钟。

目录+前言+UI测试：+功能性代码测试：+令人耳目一新的单元测试+代码测试+Jest介绍+一、基础教程+安装+源码开发+测试用例编写+开始测试+二、核心API+全局方法+匹配器+异步代码测试

目录

• 前言
• UI测试:
• 功能性代码测试:
• 让人闻风丧胆的单元测试
• 代码测试代码
• Jest介绍
• 一、基础教程
• 安装
• 源码开发
• 测试用例编写
• 开始测试
• 二、核心API
• 全局方法
• 匹配器
• 异步代码测试
• 回调
• Promise
• Async/Await
• Mock Functions
• 使用 mock 函数
• .mock 属性
• Mock 的返回值
• Mocking Modules
• 快照测试

前言

《孤勇者》最近火爆的一塌糊涂，占领了小学生、甚至幼儿园，连我家2岁多的儿子尽然也会哼几句。虽然他以为这首歌是奥特曼的主题曲。

回到正题，现代前端项目的工程化、模板化日益壮大，各种类库框架层出不穷，整个行业俨然一副百花齐放百家争鸣的状态。而对于前端单元测试而言，在整个前端领域，实际上单元测试早已不算什么冷门话题，各种测试框架、库已经非常完善。

对于一个前端开发而言，实际上我们不太需要专注所有的这些测试框架、工具。我们只需要按照自己所需（团队、项目所需）选择适合自己的即可。

而怎么选型，实际也非常简单。在现在前端项目多数基于框架的大前提下，直接从官方文档上找单元测试的部分。官方必然会提供测试库或者推荐优秀的社区测试库。

从前端项目层面，无非就是UI的测试(简单的理解成DOM的测试) 、功能性代码测试。

UI测试:

很容易理解，前端的项目终究还是会展示在浏览器上，那么所谓的UI测试也就是测试我们写的代码和预期渲染的UI是否一致而已。

结合到我们现在实际项目，多数基于UI框架的情况（比如React），我们只需要跟随官方提供的UI测试途径即可，千万别去直接搜索XX前端单元测试框架之类的。每个框架都有自己的特性，或多或少都会涉及到UI的渲染，比如虚拟DOM、生命周期之类。所以像React官方文档提到的@testing-library/react（也有曾经使用过比较优秀的Enzyme），都会根据React框架特性提供相关的API例如：render、renderHook之类的。

本文对于UI的测试不进行详细介绍。

功能性代码测试:

简单的说就是一段封装的代码，无论是一个函数或者是一个类。而这段代码多数情况和UI无关，我们只需要要关注功能实现的本身，最简单的就是一个函数，输入什么参数，返回什么值。

功能性代码的测试将是本文讲述的重点，当然我们需要一个测试框架提供支持，本文讲述的Jest就是这种一个框架。

在介绍Jest之前，还是先聊一聊何谓单元测试，进行有效的单元测试。

让人闻风丧胆的单元测试

说起单元测试，尤其是对于前端行业的同学们来说，真的算的上是让人闻风丧胆，毕竟单测这个词听上去就是牛逼轰轰。

也经常有勇士会说，劳资React、antd一把梭哈，要个鸡儿的单元测试。

现实工作中，当你接收了别人的代码，大多数人可能会觉得在接手一座屎山，得想办法怎么在屎山上进行雕花，而且还得让山不崩塌。阿西吧，劳资还不如重构了。

stop！又双叒叕扯远了。

好了，别管测试同学嘴里的什么黑盒、白盒、性能、功能。对我们大多数人而言，单元测试，不就是对代码进行测试么。怎么测试呢？

代码测试代码

可能你有点明白了，那么问题来了，挖掘机哪家强？sorry，问题是如何用代码测试代码？

举个简单的例子，你写个了函数，判断请求是否成功。因为不可抗拒的因素，你们公司团队里面的后端同学，每个人的接口对于成功返回的定义不一样。有的是通过goo.gl/fbAQLP exports[`component--Loading 单元测试start 1`] = ` <div className="container" > <div className="inner" > <div className="boxLoading" /> <div className="title" > 努力加载中... </div> </div> </div> `;

我们可以在Jest 命令中加入--updateSnapshot，这样快照有跟新的话会跟新快照文件而不是直接让整个快照测试失败了。

建议把快照测试文件提交到git，快照测试文件也可以进行code-review。

以上就是前端单元测试之UI测试功能性代码测试教程的详细内容，更多关于前端单元测试的资料请关注易盾网络其它相关文章！