react 单元测试 (jest+enzyme)
react 单元测试 (jest+enzyme)
为什么要做单元测试
作为一个前端工程师,我是很想去谢单元测试的,因为每天的需求很多,还要去编写测试代码,感觉时间都不够用了。
不过最近开发了一个比较复杂的项目,让我感觉一旦项目大了、复杂了,而且还是多人维护一个应用,编写测试代码,
还是很有必要的。毕竟这样做完之后,后边的维护会轻松很多。
单元测试
测试代码的最小单元,一个函数就是一个单元
测试工具
主要用到的测试工具是 jest 和 enzyme
jest 、 enzyme 介绍
jest 是 facebook 发布的一个开源的,基于 jasmine 框架的 javascript 单元测试工具它提供了很多有效的功能,
包含了内置的测试环境的 DOM API 来操作 Dom、断言库、mock 等功能,并且 jest 是 react 的官网上面推荐
的工具。
enzyme 是 Airbnb 开源的 react 测试类库,提供了一套简洁强大的 api ,可以通过 jq 的风格进行 dom 处理,
还可以引用一些其他的 dom 操作库。
react 单元测试的搭建
react 项目是基于 webpack + babel 来进行构建的。
安装 npm 包
首先需要添加一些 jest + enzyme 的 npm 包
yarn add jest enzyme babel-jest regenerator-runtime react-test-renderer
enzyme 需要安装对应的 react 的 adapter 版本
yarn add enzyme-adapter-react-16
配置文件
1、package.json
"scripts": {"test": "jest --colors --coverage"},
添加颜色和现实覆盖率
.babelrc 文件
"env": { // 单元测试下配置"test": {"presets": ["react","react-optimize",["env",{"modules": "commonjs", // 主要是添加这个"debug": true,"useBuiltIns": false,"targets": {"browsers": "defaults"}}],"stage-0"]}}
因为测试环境的在 babel 中的配置 dev 为 test。
所以这里需要特殊配置,modules 的形式是 commonjs
添加jest配置文件jest.config
module.exports = {roots: ['<rootDir>/__test__/', '<rootDir>/src/'], // 测试的目录modulePaths: ['<rootDir>'],coveragePathIgnorePatterns: ['/node_modules/', '/tests/setup.js'], //忽略统计覆盖率的文件// bail: true,// testRegex: '', // 后缀名称// testPathIgnorePatterns: 'est', // 忽略路径// moduleNameMapper: { // 与测试无关的资源文件同意mock 掉,这样在import 的时候就不会真的引入这些文件// '^import?': '<rootDir>/build/jestImportMock.js',// '\\.(css|less|gif|jpg|jpeg|png)$': '<rootDir>/build/jestStyleMock.js',// },
};
jest 详解
1、简单测试结构
function sum(a,b){return a+b;
}it('adds 1 + 2 to equal 3', () => {expect(sum(1, 2)).toBe(3);
});
2、异步的测试结构
async function sum (a,b){return a+b;
}it('adds 1 + 2 to equal 3',async () => {const total = await sum(1,2)expect(total).toBe(3);
});
3、Mock Function 结构
function forEach(items, callback) {for (let index = 0; index < items.length; index++) {callback(items[index]);}
}const mockCallback = jest.fn(x => 42 + x);
forEach([0, 1], mockCallback);// 可以 mockCallback.mock 访问 mockCallback 状态
1、jest.fn 用来创建一个 mock function
2、mockCallback.mock 可以访问 mock function 的状态
mock 的属性:
calls : 调用的参数数组,保存了每次调用的入参
calls.length : 调用次数
calls[0][0] : 第一次调用的时候的第一个参数
results:调用的结果数组
results[0].value : 第一次调用的返回结果
执行 mock function
const myMock = jest.fn();
console.log(myMock());
// > undefinedmyMock.mockReturnValueOnce(10).mockReturnValueOnce('x').mockReturnValue(true);console.log(myMock(), myMock(), myMock(), myMock());//10 x true
1、用 mockRetrunValueOnce(value) 来预先设置函数的返回值
2、mymock() 返回预先设置的值
异步请求的数据模拟
let fetch = {get:() =>{}
}
jest.mock(fetch)
fetch.get.mockResolvedValue({data:{},status:0})
fetch.get(url,options)
// {data:{},status:0}
4、常用全局方法
describe(message,()=>{}) : 创建块
it(message,()=>{}) : 测试单元
5、ecpect 常用方法
expect(value) : 注入测试单元
expect.extend({}) : 拓展 expect 方法
expect.extend({toBeBetween(received, arg1, arg2) {const min = arg1;const max = arg2;if (received > min && received < max) {return {message: '',pass: true,};}return {message: `received is between in ${min} - ${max}`,pass: true,};},
});expect(99).toBeBetween(1,100)
expect.anything() : 返回除了 null 和 undefined 意外的任何类型数据
expect.any(Number/String) : 任意 数字/字符串
expect.assertions(num) : 确定在块中调用几次异步
toBe(value) : 等于
toHaveBeenCalled() : 确定函数调用
toHaveBeenCalledTime(number) : 确定被调用的次数
toHaveBeenCalledWith(arg1,arg2) :取保调用的函数的值
toHaveBeenNthCalledWith(num,arg2) : 确保第几个参数
toHaveRetruned() :确保有返回值
toHave[:Nth]RetrunedWith([:num,]arg) : 确保某一个有返回值
toContain(item) : 数组中是否包含
toMatch(regex) :正则表达式
enzyme
enzyme 一共有四个大的 api ( shallow 、mount 、render 、selectors )。
通过这四个 api 可以对 react 组件进行操作。
我们可以通过类似于 jquery 的操作来进行 test 。
react 单元测试 (jest+enzyme)相关推荐
- Jest enzyme 进行react单元测试
下面的文章会默认读者了解 React及其技术栈以及基本的前端单元测试,由于本文涉及到的技术较多,故不宜一一在文中介绍,谅解. 写在前面 在撰写单元测试用例之前,我们需要了解到撰写测试用例的原因.写测试 ...
- React单元测试:Jest+Enzyme
一.概述 本文介绍基于Jest+Enzyme的React单元测试编写方法,包括对组件.action.reducer和其他工具类和功能类js的测试.主要介绍对组件.action.reducer代码的单元 ...
- 使用Jest进行React单元测试
React单元测试方案 前置知识 为什么要进行测试 测试可以确保得到预期的结果 作为现有代码行为的描述 促使开发者写可测试的代码,一般可测试的代码可读性也会高一点 如果依赖的组件有修改,受影响的组件能 ...
- React 16 Jest单元测试 之 Jest工具
转载地址 React 16 Jest单元测试 之 Jest工具 项目初始化[这里使用之前的项目,节省时间] 项目初始化地址 https://github.com/durban89/webpack4-r ...
- React 16 + Jest单元测试 之 Mock Functions(Mock Names 和 Custom Matchers)
转载 React 16 + Jest单元测试 之 Mock Functions(Mock Names 和 Custom Matchers) 项目初始化[这里使用之前的项目,节省时间] 项目初始化地址 ...
- React Jest + enzyme 配置 及 简单用例
这里简单的介绍一下 React 项目下 Jest + enzyme 配置 并运行一个简单的测试用例. 这里跳过React项目的创建,React项目创建可以看下 React项目创建 1.安装 jest ...
- Jest + Enzyme React 组件测试实践
≈ 最近把组件测试接入到日常开发,提高了项目代码健壮性,可维护性.本人也从0到1收获了组件测试的经验. 本文总结一下最近两周 组件测试 相关的研究,包括: Jest + Enzyme 的基本介绍 Je ...
- 搭建 Jest+ Enzyme 测试环境
1.为什么要使用单元测试工具? 因为代码之间的相互调用关系,又希望测试过程单元相互独立,又能正常运行,这就需要我们对被测函数的依赖函数和环境进行mock,在测试数据输入.测试执行和测试结果检查方面存在 ...
- React 16 Jest手动模拟(Manual Mocks)
2019独角兽企业重金招聘Python工程师标准>>> 转载地址 React 16 Jest手动模拟(Manual Mocks) 项目初始化 git clone https://gi ...
最新文章
- bzoj1588[HNOI2002]营业额统计
- 我的世界服务器无限小号,我的世界惊现全新无限刷物品bug 服主大大都要注意了...
- 面试的时候的要注意的case应该怎么分析
- Linux卸载minikube命令整理
- java mysql 操作类_Java 数据库简单操作类
- 合肥工业大学计算机与信息学院学生会宗旨,计算机与信息学院举办第一期“AIE计划”实验室招新宣讲会...
- 开发人员MySQL调优-理论篇
- ssh(Spring+Spring mvc+hibernate)——DeptDaoImpl.java
- mysql中预定义常量_PHP预定义常量
- opencv-api approxPolyDP
- 蚂蚁回应渠道之争;微软更新致大规模服务中断;OpenSSH 8.4 发布 | 极客头条
- 估算软件规模之前如何明确划分系统边界?
- 调用http_Go教程34:Go微服务间Http+Json调用
- 【Vue知识点】路由router详解
- linux上启动eureka集群服务,SpringCloud@Docker系列: 运行Eureka Server集群
- 【java】BeanUtils.populate()的使用
- 洛谷P2678 [NOIP2015 提高组] 跳石头
- 2019年互联网公司月饼哪家强?阿里、百度、网易等14家中秋月饼盘点
- 原创 牛客网产品笔试题刷题打卡——用户研究
- 用html实现抽奖大转盘,【项目实战】用CSS实现一个抽奖转盘(附详细代码+思路)...
热门文章
- 新建文件夹——模拟电话薄,拨打电话
- Android基础篇-多线程下载(一)
- OPC和DCOM配置
- mysql导入dcom配置_Excel部署配置DCOM
- JAVA计算机毕业设计中国历史网站Mybatis+源码+数据库+lw文档+系统+调试部署
- 如何以“API”接口的形式帮助电商商家解决货源及运营难题?(淘宝/京东/1688API接口的接入)
- Goby 内测版1.8.221 | 启动爬虫,继续助力红队
- php iso,2017北京PHP开发者年会暨中国 isophp 社区成立
- 中国石油大学计算机科学技术李克文,李克文
- 珍惜每一天,不虚度,不浪费