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

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

eb68655772319669f98d571f2abf5cb3_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.jpg

现在前端三大框架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、调参,本文就不详细介绍了,深入的学习和使用大家可以参考下面的文章,我已经为你找好。

目录
相关文章
|
8月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
监控 JavaScript 前端开发
如何在实际应用中测试和比较React和Vue的性能?
总之,通过多种方法的综合运用,可以相对客观地比较 React 和 Vue 在实际应用中的性能表现,为项目的选择和优化提供有力的依据。
333 1
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
202 2
|
前端开发 JavaScript 开发者
从零开始构建你的第一个React应用
从零开始构建你的第一个React应用
119 2
|
测试技术 开发者 UED
探索软件测试的深度:从单元测试到自动化测试
【10月更文挑战第30天】在软件开发的世界中,测试是确保产品质量和用户满意度的关键步骤。本文将深入探讨软件测试的不同层次,从基本的单元测试到复杂的自动化测试,揭示它们如何共同构建一个坚实的质量保证体系。我们将通过实际代码示例,展示如何在开发过程中实施有效的测试策略,以确保软件的稳定性和可靠性。无论你是新手还是经验丰富的开发者,这篇文章都将为你提供宝贵的见解和实用技巧。
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
151 2
|
前端开发 JavaScript Android开发
掌握React Native,构建跨平台移动应用的利器
掌握React Native,构建跨平台移动应用的利器
|
前端开发 JavaScript API
React Native实战:构建跨平台移动应用
React Native实战:构建跨平台移动应用
232 0
|
前端开发 JavaScript 网络架构
从零开始构建你的第一个React应用
从零开始构建你的第一个React应用
140 0
|
前端开发 JavaScript 开发者
从零构建你的第一个React应用
从零构建你的第一个React应用
144 0