Jest+Enzyme测试React组件（上）

React函数式组件

fb团队推荐使用函数式组件进行开发，但是函数是无状态的, 用class组件不香嘛，自带state状态，为什么要换写法？原因我们就来讲讲。

1. hooks是比HOC和render props更优雅的逻辑复用方式

state是一种外部数据。useState得到的状态，对于组件来说是一种外部传入的数据，和props、context没有本质的区别。useState声明的状态，实际由React内核进行维护，传递给函数式组件。

hooks时代的函数式组件依然是【外部数据=>view】的纯函数。

Umi Hooks阿里团队开源的hooks方法集（现已升级为ahooks），可以说是hook界的lodash，足以满足日常开发，复杂业务也可自定义hook。

2. 函数式组件的心智模型更加“声明式”

现在hooks直接给你一个声明副作用的API，使得生命周期变成了一个"底层概念"，无需开发考虑，开发者工作在更高的抽象层次上了。

3. 纯函数组件对于开启"并发模式"是必备的条件

React渲染过程本质上是在：根据数据模型（应用状态）来计算出视图内容。

组件纯化以后，开发者编写的组件树其实就是 (应用状态)=>DOM结构的纯函数。

又因为应用状态实际由React内核进行维护，所以React内核可以维护多份数据模型，并发渲染多个版本的组件树。

React开发者只需要编写纯函数，不需要关心如何应对这些并发渲染。

等等，不是要说Jest测试嘛？讲了这么多函数式编程是什么鬼?

因为编写单元测试和你的组件划分、逻辑复用、状态传递有很大关系，如果你的编码不规范、代码耦合度高，比如这样：

// antd{  title: '状态',  dataIndex: 'optionStatus',  render: (value: number) => (value: number) => {    if (value === 0) {      return <Tag color="red">{PROPOSAL_RULE_ENABLE[0].label}</Tag>    }    if (value === 1) {      return <Tag color="blue">{PROPOSAL_RULE_ENABLE[1].label}</Tag>    }    return <Tag color="blue">{PROPOSAL_RULE_ENABLE[2].label}</Tag>  },  width: 120,},

（左右滑动查看完整代码）

在编写测试语句的时候if条件分支很容易测不全，而且逻辑写在render方法里面，需要在table里mock进去不同的数据，也增加了编码工作。

打个比方：写代码战斗力为80，写单元测试战斗值120+，首先要明白自己的代码逻辑，才能写出好的测试语句。

而且在开发中要有意识地想到后面的测试怎么写，顾头不顾尾很容易返工改代码，当然，你说我测不全无所谓，一把梭哈干到底？

这样也可以啦，只是后面测试可能会多找你谈谈心......

这就引出了第二个问题：如何根据产品原型划分我的组件，代码结构怎么设计呢？

Testing

组件划分

React+Typescript+Mobx+hooks。

以上是我所在的部门, 日常开发所采用的技术栈, 举个例子：

按照以上产品原型, 拆分功能模块如下:

函数式组件编码开发:

Overview   Department.tsx //搜索部门组件   helper.ts //增 删 改 查 变更记录 搜索,方法调用    index.tsx //项目骨架   List.tsx //table表格   SearchForm.tsx //上部搜索组件

（左右滑动查看完整代码）

我们在编写代码的时候，对业务模块进行了充分的拆分，每个功能放在单独的文件中，入口文件没有太重的业务代码。

Department可以放在Component文件夹中，helper文件存放页面的调用方法，以及和store的交互，其余组件只是作为页面UI的渲染。

这里涉及到一个拆分粒度的问题，确保每个文件解决某一单一问题，比如数据格式化可以放在tool文件夹里，页面打散之后，单个文件涉及到的代码逻辑不会太重。

在后续测试中，把文件当作一个个函数，只需要输入不同的参数即可测试。

在这里推荐一个我自己创建的软件测试交流群，QQ：642830685，群中会不定期的分享软件测试资源，测试面试题以及测试行业资讯，大家可以在群中积极交流技术，还有大佬为你答疑解惑。

风里雨里，我在群中等你。

Jest+Enzyme测试React组件（上）相关推荐

全网最细：Jest+Enzyme测试React组件（包含交互、DOM、样式测试）
介绍 Jest是目前前端工程化下单元测试火热的技术栈,而Enzyme的支持提供了Jest测试React业务.组件的能力,下面来介绍一下React组件测试的一些实际场景. 1. 测试依赖包 " ...
使用 Jest 和 Enzyme 测试 React 组件
type: FrontEnd title: Testing React components with Jest and Enzyme link: hackernoon.com/testing-rea ...
JavaScript 测试系列实战（一）：使用 Jest 和 Enzyme 测试 React 组件
你或许早已经知道"单元测试""端到端测试"这些名词,但从未真正付诸实践.在这一系列实战教程中,我们将手把手带你掌握 Jest.Enzyme.Cypress 等测 ...
grep v grep_使用grep4j轻松测试分布式组件上的SLA
grep v grep 因此,您的分布式体系结构如下图所示,您刚刚从企业那里收到了一项要求,以确保生产者发送并随后传输到下游系统(消费者)的消息的SLA必须快且永远不会慢于此. 400毫秒. 要求说: ...
使用grep4j轻松测试分布式组件上的SLA
因此,您的分布式体系结构如下图所示,您刚刚从企业那里收到了一项要求,以确保生产者发送并随后传输到下游系统(消费者)的消息的SLA必须快且永远不会慢于此. 400毫秒. 要求说: 从生产者发送到任何消费 ...
学习React第三篇：在React组件上设置属性(PropTypes)
继编写使用组件的render方法在React中显示输出接下来,在React组件上设置属性: 那我们如何在React中传递数据的方式. 我们将了解一下React中的propTypes和default ...
react jest测试_如何使用React测试库和Jest开始测试React应用
react jest测试 Testing is often seen as a tedious process. It's extra code you have to write, and in s ...
Jest enzyme 进行react单元测试
下面的文章会默认读者了解 React及其技术栈以及基本的前端单元测试,由于本文涉及到的技术较多,故不宜一一在文中介绍,谅解. 写在前面在撰写单元测试用例之前,我们需要了解到撰写测试用例的原因.写测试 ...
react测试组件_如何测试React组件：完整指南
react测试组件 When I first started learning to test my apps back in the day, I would get very frustrated ...

Jest+Enzyme测试React组件（上）

Jest+Enzyme测试React组件（上）相关推荐

最新文章

热门文章