jest 自动化测试
概述
jest 是 facebook 开源的,用来进行单元测试的框架,可以测试 javascipt 和 react。 单元测试各种好处已经被说烂了,这里就不多扯了。重点要说的是,使用 jest, 可以降低写单元测试的难度。
单元测试做得好,能够极大提高软件的质量,加快软件迭代更新的速度, 但是,单元测试也不是银弹,单元测试做得好,并不是测试框架好就行,其实单元测试做的好不好,很大程度上取决于代码写的是否易于测试。 单元测试不仅仅是测试代码,通过编写单元测试 case,也可以反过来重构已有的代码,使之更加容易测试。
jest 的零配置思路是我最喜欢的特性。
安装方式
# yarn
yarn add --dev jest
# OR npm
npm install --save-dev jest
测试方式
随着 node.js 的发展,javascipt 语言的发展,前端可以胜任越来越多的工作,后端很多时候反而沦为数据库的 http API 所以前端不仅仅是测试看得见的页面,还有很多看不见的逻辑需要测试。
jest 提供了非常方便的 API,可以对下面的场景方便的测试
一般函数
对于一般的函数,参考附录中的 jest Expect API 可以很容易的写测试 case 待测试文件:joinPath.js
const separator = '/'
const replace = new RegExp(separator + '{1,}', 'g')
export default (...parts) => parts.join(separator).replace(replace, separator)
测试文件的命名:joinPath.test.js 采用这种命名,jest 会自动找到这个文件来运行
import joinPath from 'utils/joinPath'
test('join path 01', () => {
const path1 = '/a/b/c'
const path2 = '/d/e/f'
expect(joinPath(path1, path2)).toBe('/a/b/c/d/e/f')
})
test('join path 02', () => {
const path1 = '/a/b/c/'
const path2 = '/d/e/f'
expect(joinPath(path1, path2)).toBe('/a/b/c/d/e/f')
})
test('join path 03', () => {
const path1 = '/a/b/c/'
const path2 = 'd/e/f'
expect(joinPath(path1, path2)).toBe('/a/b/c/d/e/f')
})
异步函数
上面的是普通函数,对于异步函数,比如 ajax 请求,测试写法同样容易 待测试文件:utils/client.js
export const get = (url, headers = {}) => {
return fetch(url, {
method: 'GET',
headers: {
...getHeaders(),
...headers
}
}).then(parseResponse)
}
测试文件:client.test.js
import { get } from 'utils/client'
test('fetch by get method', async () => {
expect.assertions(1)
// 测试使用了一个免费的在线 JSON API
const url = 'https://jsonip.com/'
const data = await get(url)
const { about } = data
expect(about).toBe('/about')
})
测试的生命周期
jest 测试提供了一些测试的生命周期 API,可以辅助我们在每个 case 的开始和结束做一些处理。 这样,在进行一些和数据相关的测试时,可以在测试前准备一些数据,在测试后,清理测试数据。
4 个主要的生命周期函数:
- afterAll(fn, timeout): 当前文件中的所有测试执行完成后执行 fn, 如果 fn 是 promise,jest 会等待 timeout 毫秒,默认 5000
- afterEach(fn, timeout): 每个 test 执行完后执行 fn,timeout 含义同上
- beforeAll(fn, timeout): 同 afterAll,不同之处在于在所有测试开始前执行
- beforeEach(fn, timeout): 同 afterEach,不同之处在于在每个测试开始前执行
BeforeAll(() => {
console.log('before all tests to excute !')
})
BeforeEach(() => {
console.log('before each test !')
})
AfterAll(() => {
console.log('after all tests to excute !')
})
AfterEach(() => {
console.log('after each test !')
})
Test('test lifecycle 01', () => {
expect(1 + 2).toBe(3)
})
Test('test lifecycle 03', () => {
expect(2 + 2).toBe(4)
})
mock
我自己觉得能不 mock,还是尽量不要 mock,很多时候觉得代码不好测试而使用 mock,还不如看看如何重构代码,使之不用 mock 也能测试。 对于某些函数中包含的一些用时过长,或者调用第三方库的地方,而这些地方并不是函数的主要功能, 那么,可以用 mock 来模拟,从而提高测试执行的速度。
对于上面异步函数的例子,我们改造成 mock 的方式:
const funcUseGet = async url => {
return await get(url)
}
test('mock fetch get method', async () => {
const client = require('utils/client')
client.get = jest.fn(url => ({ mock: 'test' }))
const url = 'http://mock.test'
const data = await funcUseGet(url)
expect(data).toEqual({ mock: 'test' })
})
react 测试
jest 可以测试 react component,但是我们用了状态分离的方式开发前端, 大部分功能都在 action 中,这部分测试基本没有做。
附录
- jest Global API: https://facebook.github.io/jest/docs/en/api.html
- jest Expect API: https://facebook.github.io/jest/docs/en/expect.html
- jest Mock API: https://facebook.github.io/jest/docs/en/mock-function-api.html
jest 自动化测试的更多相关文章
- Jest自动化测试
最近一直很苦恼,测试这一块的内容,一直想提升测试效率,从慕课网了解到了自动化测试jest ,准备试下下,记录一下学习笔记,方便别人使用 1 什么是 Jest? Jest是 Facebook 的一套开源 ...
- react教程 — 开发 总结
本文章是在熟练使用 VUE 的基础上,对比VUE 功能进行的一个技术总结. 1.react项目快速搭建 https://blog.csdn.net/mapbar_front/article/deta ...
- Beta_测试说明
Beta阶段测试说明 测试发现的BUG Beta阶段测试BUG: 测试发现的BUG都放在BUG FIX里面 GitHUB issue BUG FIX 后端:实体识别结果重复. 解决:把处理结果的id和 ...
- 基于jest和puppeteer的前端自动化测试实战
前端测试现状 经常听到后端同学说“单元测试”,前端写过测试用例的有多少?答案是:并不多,为什么呢?两个主要原因 1.前端属于GUI软件,浏览器众多,兼容问题让人头大,用户量有一定规模的浏览器包括: I ...
- antd-pro1.0使用jest对react组件进行单元测试
前言 基于React+Ant Design(以下用Antd表示)的项目,在对于自己封装的,或者基于Antd封装的公共组件的自动化测试技术的选型和实践. 背景 随着前端项目越来越大,业务逻辑日益繁杂,协 ...
- Jest测试框架入门
近年来,随着前端工程化的发展,前端发生了翻天覆地的变化.jQuery已经慢慢淡出了我们的视野,React.Vue和anglur三驾马车急速驶来.从此,前端进入了数据驱动的时代,也有了清晰的模块化开发的 ...
- jest enzyme unit test react
1. 测试类型 单元测试:指的是以原件的单元为单位,对软件进行测试.单元可以是一个函数,也可以是一个模块或一个组件,基本特征就是只要输入不变,必定返回同样的输出.一个软件越容易些单元测试,就表明它的模 ...
- 前端测试框架Jest——语法篇
使用匹配器 使用不同匹配器可以测试输入输出的值是否符合预期.下面介绍一些常见的匹配器.普通匹配器最简单的测试值的方法就是看是否精确匹配.首先是toBe() test('two plus two is ...
- 单元测试与单元测试框架 Jest
什么是单元测试? 测试是一种验证我们的代码是否可以按预期工作的手段. 被测试的对象可以是我们程序的任何一个组成部分.大到一个分为多步骤的下单流程,小到代码中的一个函数. 单元测试特指被测试对象为程序中 ...
随机推荐
- xtrabackup备份(MySQL备份)与恢复
xtrabackup备份(MySQL备份)与恢复 1. innobackupex参数选项 --no-timestamp: 不创建一个时间戳 --defaults-file=[MY.CNF] //指定配 ...
- WARNING: 'aclocal-1.14' is missing on your system.
源码安装zabbix agent时进行到make install时报如下错误: WARNING: 'aclocal-1.14' is missing on your system. You shoul ...
- 【MongoDb入门】15分钟让你敢说自己会用MongoDB了
一.MongDB是什么呢,我该如何下手呢? MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. 如果小伙伴你的机器上还没有安装Mon ...
- asp.net core 系列 19 EFCore介绍
一.概述 目前最新的EF Core版本是3.0,最稳定的EF Core版本是2.2.EF Core 的计划与 .NET Core以及 ASP.NET Core 版本同步.EF Core 是一个 .NE ...
- Python爬虫入门教程 24-100 微医挂号网医生数据抓取
1. 写在前面 今天要抓取的一个网站叫做微医网站,地址为 https://www.guahao.com ,我们将通过python3爬虫抓取这个网址,然后数据存储到CSV里面,为后面的一些分析类的教程做 ...
- ActivityLifecycleCallbacks 的简单使用
转载自 http://blog.csdn.net/tongcpp/article/details/40344871 ActivityLifecycleCallbacks是什么? Application ...
- 使用Spring Cloud搭建高可用服务注册中心
我们需要的,不仅仅是一个服务注册中心而已,而是一个高可用服务注册中心. 上篇博客[使用Spring Cloud搭建服务注册中心]中我们介绍了如何使用Spring Cloud搭建一个服务注册中心,但是搭 ...
- import 和 export
1.export 命令 export 命令用于规定模块的对外接口. 一个模块就是一个独立的文件.该文件内部所有的变量,外部无法获取.要想外部能够读取模块内部的某个变量,就必须使用 export 关键字 ...
- .netcore2.0+pgsql 脚手架
mystaging介绍 这是一个 .netcore+pgsql 的脚手架,可以一键生成实体对象和业务层接口,让开发人员无需关注底层变动,专注编写业务代码,它可以让你使用 .netcore2.0的新特性 ...
- RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->Web版本工作流部分业务处理界面与查看界面全新展示
RDIFramework.NET工作流程组件是以RDIFramework.NET框架为支撑,根据我们多年的项目经验和项目实践,结合国内各大工作流产品的特点研发的一套流程管理组件.该组件不仅考虑到从零搭 ...