Jest：JS测试框架学习

基本使用

安装 yarn add --dev jest
新建功能文件 Sum,js

function Sum(a,b) {return a + b;
}module.exports = {Sum}

新建测试文件 Sum.test.js (跟2中功能文件对应，jest会自动匹配)

const {Sum} = require("./Sum.js");test("测试求和方法: a+b", () => {expect(Sum(1,2)).toBe(3);
})

修改 package.json 的配置

...
"scripts": {"test": "jest"
}
...

运行 yarn test 即可。

jest配置文件

生成 jest.config.json 文件
npx jest --init
生成代码覆盖率统计，如下：
npx jest --coverage
匹配器
tobe 精确匹配
更多内容参考这里
自动执行测试
package.json 中增加 --watchAll后缀

"scripts": {"test": "jest --watchAll"
}

支持 es6 import导入方式

安装babel 依赖 yarn add @babel/core@7.4.5 @babel/preset-env@7.4.5 --dev
配置 .babelrc 文件

{"presets": [["@babel/preset-env", {"targets": {"node": "current"}}]]
}

require 引入改有 import 导入

// const {Sum} = require("./Sum.js");
// 改有 import 导入
import {Sum} from "./Sum.js";test("测试求和方法: a+b", () => {expect(Sum(1,2)).toBe(3);
})

异步代码测试

yarn add axios@0.19.0 --save. 安装 axios依赖
编写 fetchData.js 和 fetchData.test.js 文件

fetchData.js

import Axios from "axios";// 1. 有回调函数
export const fetchOne = (fn => {Axios.get('http://redatao.com/api/blog/getColumns').then(res => {fn(res)})
})// 2. 直接返回接口结果
export const fetchTwo = (fn => {return Axios.get('http://redatao.com/api/blog/getColumns')
})// 3. 请求一个404接口，但需要测试通过
export const fetchThree = (fn => {return Axios.get('http://redatao.com/api/blog/getColumns')
})// 4. 使用async、await获取异步结果
export const fetchFour = (fn => {return Axios.get('http://redatao.com/api/blog/getColumns')
})

fetchData.test.js

import {fetchOne, fetchTwo, fetchThree, fetchFour} from "./fetchData"// 1. 关键点：done 代表 fetchData传入的回调函数执行之后才进行测试
test('测试带回调函数的 axios请求', (done) => {fetchOne(data => {expect(data).toEqual({success: true})done();})
})// 2. 直接返回结果的请求
test('测试直接返回 结果的 axios请求', () => {// 关键点：这需要 return，才能在请求结果返回后  再进行testreturn fetchTwo().then(res => {expect(res).toEqual({success: true})})
})// 3. 让404 接口通过测试
test('让404 接口通过测试', () => {// 关键点：这里必须使用 断言 执行expect1次，否则测试不起作用expect.assertions(1); // 断言，表示必须执行 expect 1次return fetchThree().catch(err => {expect(err.toString().indexOf('404') > -1).toBe(true)})
})// 4. 使用 async、await
test('使用async、await获取异步结果', async () => {const response = await fetchFour();expect(response.data).toEqual({success: true})
})

测试生命周期钩子

beforeAll() 所有测试用例之前执行
beforeEach() 每个测试用例之前执行
afterEach() 每个测试用例之后执行
afterAll() 所有测试用例之后执行

tianxi.js

export default class NewGeneral {choose(number) {this.user = number == 1 ? '关羽' : '黄忠'}shuadao() {this.fuwu = this.user + '给你耍大刀';}shejian() {this.fuwu = this.user + '给你弯弓射箭';}
}

tianxi.test.js

import NewGeneral from './tianxia'const general = new NewGeneral();// 所有测试用例之前
beforeAll(() => {console.log('刘备开始打天下');
})beforeEach(() => {console.log('每次打仗之前先选将');
})afterEach(() => {console.log('每次打了胜仗要犒赏');
})test('测试 关羽 耍大刀方法', () => {general.choose(1)general.shuadao()console.log(general.fuwu);expect(general.fuwu).toEqual('关羽给你耍大刀')
})test('测试 黄忠 射箭方法', () => {general.choose(2)general.shejian()console.log(general.fuwu);expect(general.fuwu).toEqual('黄忠给你弯弓射箭')
})// 所有测试用例之后执行
afterAll(() => {console.log('刘备建立蜀汉政权，奠定三分天下大势');
})

测试用例分组

使用 describe 将相关内容包裹起来。如下变更：
tianxi.test.js

export default class NewGeneral {choose(number) {this.user = number == 1 ? '关羽' : '黄忠'}shuadao() {this.fuwu = this.user + '给你耍大刀';}zhenshou() {this.fuwu = this.user + '给你镇守荆州';}shejian() {this.fuwu = this.user + '给你弯弓射箭';}lvedi() {this.fuwu = this.user + '给你攻城略地';}
}

tianxi.test.js

import NewGeneral from './tianxia'const general = new NewGeneral();// 所有测试用例之前
beforeAll(() => {console.log('刘备开始打天下');
})beforeEach(() => {console.log('每次打仗之前先选将');
})afterEach(() => {console.log('每次打了胜仗要犒赏');
})describe('关羽相关技能', () => {test('测试 关羽 耍大刀方法', () => {general.choose(1)general.shuadao()console.log(general.fuwu);expect(general.fuwu).toEqual('关羽给你耍大刀')})test('测试 关羽 守城方法', () => {general.choose(1)general.zhenshou()console.log(general.fuwu);expect(general.fuwu).toEqual('关羽给你镇守荆州')})
})describe('黄忠相关技能', () => {test('测试 黄忠 射箭方法', () => {general.choose(2)general.shejian()console.log(general.fuwu);expect(general.fuwu).toEqual('黄忠给你弯弓射箭')})test('测试 黄忠 攻城略地', () => {general.choose(2)general.lvedi()console.log(general.fuwu);expect(general.fuwu).toEqual('黄忠给你攻城略地')})
})// 所有测试用例之后执行
afterAll(() => {console.log('刘备建立蜀汉政权，奠定三分天下大势');
})

Jest：JS测试框架学习相关推荐

Jest测试框架学习(一)
前言 jest是针对JavaScript的测试框架.如果遵循TDD原则,在任何功能开发之前都需要先写测试.而测试分为单元测试,集成测试和系统测试. 单元测试单元测试可以理解为对于单个函数(单一功能) ...
测试学习java_使用Junit测试框架学习Java
前言在日常的开发中,离不开单元测试,而且在学习Java时,特别是在测试不同API使用时要不停的写main方法,显得很繁琐,所以这里介绍使用Junit学习Java的方法.此外,我使用log4j将结果输 ...
pytest测试框架学习-1
一.pytest框架介绍学习环境准备 pytest运行规则: 查找当前目录及其子目录下以test_.py或者_test.py文件,找到文件后,在文件中找到以test开头函数并执行. 写个测试类当用 ...
PHPUnit测试框架学习(1)
网站http://www.phpunit.cn/ php学习的API接口测试
pytest测试框架学习笔记
安装pytest pip是python包管理工具 pip install pytest pytest 生态是由pytest本身和pytest插件共同构成的: pytest:框架本体 pytest-h ...
pytest 测试框架学习（14）：pytest.warns
pytest.warns 含义使用含义 warns: 使用 pytest.warns 可以检查代码是否发出特定的警告信息,使用方法与 raises 类似. 源码: 使用简单使用 import w ...
使用python构造大量测试数据_python实例编写（6）--引入unittest测试框架，构造测试集批量测试（以微信统一管理平台为例）...
---恢复内容开始--- 一.python单元测试实例介绍 unittest框架又叫PyUnit框架,是python的单元测试框架. 先介绍一个普通的单元测试(不用unittest框架)的实例: 首先 ...
karma 测试框架的前世今生
引言在前端测试框架的学习中了解到了karma的强大,搜索得到淘宝前端团队的这片讲述karma特点及原理的分享,非常不错.转载分享至此, 原文链接:http://taobaofed.org/blog/ ...
nodeJS 框架 - 学习/实践
1.应用场景主要用于构建高效且可伸缩的服务端应用程序 2.学习/操作 1.介绍在Node.js诞生后的短短几年里,出现了无数种Web框架.ORM框架.模版引擎.测试框架.自动化构建工具,数量之多, ...

Jest：JS测试框架学习

基本使用

jest配置文件

异步代码测试

测试生命周期钩子

测试用例分组

Jest：JS测试框架学习相关推荐

最新文章

热门文章