构建知识体系 第3期 - 单元测试之React怎样测试

关注“前端张大胖”

打破知识诅咒

和我一起打造自己的知识体系

从此告别迷茫

━━━━ 

咱们从上一篇文章了解到可使用 mocha 和 node 内自带的断言库assert做 node 端的单元测试，那如果当我们使用前端框架（如 react、vue）做项目的时候，怎样做单元测试呢？

现在前端三大框架react，vue，angular，在国内使用率较多的肯定是 react 和 vue，而angular 可能在国外市场较大。我个人倾向于react技术栈，所以咱们就以如何做react单元测试 为题。

这里推荐一个技术选型

Jest + Enzyme

Jest

Jest是Facebook开源的一个前端测试框架，主要用于React和React Native的单元测试，已被集成在create-react-app中，它也是 React 目前使用的单元测试框架。目前除了 Facebook 外，Twitter、Nytimes、Airbnb 也在使用 Jest。Jest 除了基本的断言和 Mock 功能外，还有快照测试、实时监控模式、覆盖度报告等实用功能。同时 Jest 几乎不需要做任何配置便可使用。

Enzyme

Enzyme是Airbnb开源的React测试工具库，基于官方的测试工具库ReactTestUtils的二次封装，提供了一套简洁强大的 API，并内置Cheerio，实现了 jQuery 风格的方式进行DOM 处理，开发体验十分友好。在开源社区有超高人气，同时也获得了React 官方的推荐。

具体如何配置和搭建环境、写测试用例、调 api、调参，本文就不详细介绍了，深入的学习和使用大家可以参考下面的文章，我已经为你找好。

觉得有用的话 请动动手

分享到朋友圈或者技术交流群

让更多人受益

长按关注>>>

盘它

不要吝啬你的点赞，给个 star呗