使用Jest测试JavaScript (入门篇) 1
1 什么是 Jest?
Jest
Jest是 Facebook 的一套开源的 JavaScript 测试框架, 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具,是一款几乎零配置的测试框架。并且它对同样是 Facebook 的开源前端框架 React 的测试十分友好。
2 安装Jest
2.1 初始化package.json
在shell
中输入以下命令,初始化前端项目并生成package.json
:
npm init -y
2.2 安装Jest及相关依赖
在shell
中输入以下命令,安装测试所需要的依赖:
npm install @babel/preset-env
2.3 添加.babelrc
文件
在项目的根目录下添加.babelrc
文件,并在文件复制如下内容:
{"presets": ["@babel/preset-env"]
}
2.4 修改package.json
中的test
脚本
打开package.json
文件,将script
下的test
的值修改为jest
:
"scripts": {"test": "jest",//全局"jest": "jest ./tests"//某些目录下}
3. 编写你的第一个Jest测试
创建src
和test
目录及相关文件
- 在项目根目录下创建
src
目录,并在src
目录下添加functions.js
文件 - 在项目根目录下创建
test
目录,并在test
目录下创建functions.test.js
文件
Jest会自动找到项目中所有使用.spec.js
或.test.js
文件命名的测试文件并执行,通常我们在编写测试文件时遵循的命名规范:测试文件的文件名 = 被测试模块名 + .test.js
,例如被测试模块为functions.js
,那么对应的测试文件命名为functions.test.js
。
在src/functions.js
中创建被测试的模块
export default {sum(a, b) {return a + b;}
}
在test/functions.test.js
文件中创建测试用例
import functions from '../src/functions';test('sum(2 + 2) 等于 4', () => {expect(functions.sum(2, 2)).toBe(4);
})
运行npm run test
, Jest会在shell
中打印出以下消息:
PASS test/functions.test.js√ sum(2 + 2) 等于 4 (7ms)Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.8s
4.常用的几个Jest断言
上面测试用例中的expect(functions.sum(2, 2)).toBe(4)
为一句断言,Jest为我们提供了expect
函数用来包装被测试的方法并返回一个对象,该对象中包含一系列的匹配器来让我们更方便的进行断言,上面的toBe
函数即为一个匹配器。我们来介绍几种常用的Jest断言,其中会涉及多个匹配器。
.not
//functions.test.js
import functions from '../src/functions'test('sum(2, 2) 不等于 5', () => {expect(functions.sum(2, 2)).not.toBe(5);
})
.not
修饰符允许你测试结果不等于某个值的情况,这和英语的语法几乎完全一样,很好理解。
.toEqual()
// functions.js
export default {getAuthor() {return {name: 'LITANGHUI',age: 24,}}
}
// functions.test.js
import functions from '../src/functions';test('getAuthor()返回的对象深度相等', () => {expect(functions.getAuthor()).toEqual(functions.getAuthor());
})test('getAuthor()返回的对象内存地址不同', () => {expect(functions.getAuthor()).not.toBe(functions.getAuthor());
})
.toEqual
匹配器会递归的检查对象所有属性和属性值是否相等,所以如果要进行应用类型的比较时,请使用.toEqual
匹配器而不是.toBe
。
.toHaveLength
// functions.js
export default {getIntArray(num) {if (!Number.isInteger(num)) {throw Error('"getIntArray"只接受整数类型的参数');}let result = [];for (let i = 0, len = num; i < len; i++) {result.push(i);}return result;}
}
// functions.test.js
import functions from '../src/functions';test('getIntArray(3)返回的数组长度应该为3', () => {expect(functions.getIntArray(3)).toHaveLength(3);
})
.toHaveLength
可以很方便的用来测试字符串和数组类型的长度是否满足预期。
.toThrow
// functions.test.js
import functions from '../src/functions';test('getIntArray(3.3)应该抛出错误', () => {function getIntArrayWrapFn() {functions.getIntArray(3.3);}expect(getIntArrayWrapFn).toThrow('"getIntArray"只接受整数类型的参数');
})
.toThorw
可能够让我们测试被测试方法是否按照预期抛出异常,但是在使用时需要注意的是:我们必须使用一个函数将将被测试的函数做一个包装,正如上面getIntArrayWrapFn
所做的那样,否则会因为函数抛出导致该断言失败。
.toMatch
// functions.test.js
import functions from '../src/functions';test('getAuthor().name应该包含"li"这个姓氏', () => {expect(functions.getAuthor().name).toMatch(/li/i);
})
.toMatch
传入一个正则表达式,它允许我们用来进行字符串类型的正则匹配。
5 测试异步函数
安装axios
这里我们使用最常用的http请求库axios
来进行请求处理
npm install axios
编写http请求函数
我们将请求http://jsonplaceholder.typicode.com/users/1
,这是由JSONPlaceholder提供的mock请求地址
JSONPlaceholder
// functions.js
import axios from 'axios';export default {fetchUser() {return axios.get('http://jsonplaceholder.typicode.com/users/1').then(res => res.data).catch(error => console.log(error));}
}
// functions.test.js
import functions from '../src/functions';test('fetchUser() 可以请求到一个含有name属性值为Leanne Graham的对象', () => {expect.assertions(1);return functions.fetchUser().then(data => {expect(data.name).toBe('Leanne Graham');});
})
上面我们调用了expect.assertions(1)
,它能确保在异步的测试用例中,有一个断言会在回调函数中被执行。这在进行异步代码的测试中十分有效。
使用async
和await
精简异步代码
test('fetchUser() 可以请求到一个用户名字为Leanne Graham', async () => {expect.assertions(1);const data = await functions.fetchUser();expect(data.name).toBe('Leanne Graham')
})
当然我们既然安装了Babel
,为何不使用async
和await
的语法来精简我们的异步测试代码呢? 但是别忘记都需要调用expect.assertions
方法
作者:EduMedia_熠辉
链接:https://www.jianshu.com/p/70a4f026a0f1
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
使用Jest测试JavaScript (入门篇) 1相关推荐
- 使用Jest测试JavaScript (入门篇)
1 什么是 Jest? Jest是 Facebook 的一套开源的 JavaScript 测试框架, 它自动集成了断言.JSDom.覆盖率报告等开发者所需要的所有测试工具,是一款几乎零配置的测试框架. ...
- JavaScript—入门篇
JavaScript-入门(笔记) 第一章 请做好准备 1-1 为什么学习JavaScript 1-2 新朋友你在哪里(如何插入JS) 1-3 我也可以独立(引用JS外部文件) 1-4 找到你的位置( ...
- Jest测试框架入门之Mock
说到mock,大家第一个想到的肯定是项目里经常用来模拟接口返回值的 mockjs库 ,Jest里的mock有所不同,下面会举一些例子来分别讲一讲 jest.fn().jest.mock().jest. ...
- JavaScript入门篇 - DOM操作
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法. DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代 ...
- 第一章: HTML、CSS、JavaScript入门篇
文章目录 第一章 基本标签及使用 前端简介 web服务端 简易服务端 HTTP协议 HTML简介 web服务的本质 HTML语法结构 HTML注释 标签的分类01 head内常用标签 body内基本标 ...
- Jest测试框架入门之匹配器与测试异步代码
一.匹配器 1.对于一般的数字与字符串类型使用 toBe test('adds 1 + 2 to equal 3', () => {expect(1 + 2).toBe(3); });test( ...
- jmeter并发测试教程_JMeter压力测试并发测试(入门篇)
jmeter是apache公司基于java开发的一款开源压力测试工具,体积小,功能全,使用方便,是一个比较轻量级的测试工具,使用起来非常简单.因为jmeter是java开发的,所以运行的时候必须先要安 ...
- JavaScript入门篇
javascript介绍 JavaScript代码写在`<script></script>`之间.`<script type="text/javascript& ...
- JavaScript的入门篇
快速认识JavaScript 熟悉JavaScript基本语法 窗口交互方法 通过DOM进行网页元素的操作 学会如何编写JS代码 运用JavaScript去操作HTML元素和CSS样式 <!DO ...
最新文章
- 常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ;和CKEditor实例...
- mac下的抓包工具Charles
- Swift3.0语言教程字符串转换为数字值
- VisualSVN server——批量添加用户
- 三菱plc编程实例3000_三菱入门PLC编程PLC系统程序包括哪些
- java的super是什么意思_java中Super到底是什么意思?必须举例说明!
- 投资五大基本法则,助你在理财投资路上走得更平稳顺利
- ieee期刊的科技写作思路曹文平_科学网—怎样向IEEE期刊投稿* - 吴雄君的博文
- gradle 修改java代码_Gradle 插件
- 第三方网站调用微信公众号的图片被禁止
- 各种浏览器的cache文件夹
- OPPO R17在哪里打开usb调试模式的完美流程
- 计算机无法识别出硬件,电脑检测不到硬盘,电脑硬件故障检测工具
- 大于/小于/等于 的缩写
- VirtualBox和Docker安装
- CSS鼠标事件和键盘事件练习
- w10计算机运行特别卡,win10很卡?教你4大技巧,降低CPU占用,旧电脑运行如飞
- 数据化运营04 DAU、MAU、UV:谁是最有参考价值的活跃指标?
- 快来看啊,2023成都Java培训机构排行榜出来啦!
- JDK 11 首超 JDK 8,真牛逼了!
热门文章
- 2020形势与政策全套答案哪里有?---【快捷查询】
- Java | 学习系列 Java1.8 新特性详解( 包含学习代码 )
- 梦幻新开服务器维护,梦幻西游1月新区2017 1月新开服务器介绍
- [学习笔记]——SDU on tree
- 疯狂Java面试题大全(Android版)
- eclipse svn版本合并冲突解决
- 魅族的android m l,魅族崛起:Flyme6.0+mBack+骁龙625,这次终于完美了!
- C# URL参数编码
- MIRO增强之会计凭证行项目拆分
- 详解如何使用git sqush合并多次未提交commit