一、Jest 简介
1.优势:速度快、API简单、配置简单
2.前置:Jest 不支持 ES Module 语法,需要安装 babel
npm install -D @babel/core @babel/preset-env |
.babelrc
{ "presets": [ [ "@babel/preset-env", { "targets": { "node": "current" } } ] ] } |
Jest 在运行前会检查是否安装 babel,如果安装了会去取 .babelrc 文件,结合 babel 将代码进行转化,运行转化后的代码。
3. Jest 默认配置
npx jest --init |
4.Jest 模式
·jest --watchAll:当发现测试文件变动,将所有测试文件重新跑一遍
·jest --watch:需要和 git 结合使用,会比较现有文件和 commit 的文件的差异,只测试差异文件
二、Jest 匹配器
常见匹配器
·toBe
·toEqual:判断对象内容是否相等
·toMatchObject:expect(obj).toMatchObject(o),期望 o 中包含 obj
·toBeNull
·toBeUndefined
·toBeDefinded
·toBeTruthy
·toBeFalsy
·not:用于否定,比如 .not.toBeTruthy()
Number 相关
·toBeGreaterThan(大于) / toBeGreaterThanOrEqual(大于等于)
·toBeCloseTo:用于比较浮点数,近似相等时断言成立
·toBeLessThan / toBeLessThanOrEqual
String 相关
·toMatch:参数可以传字符串或正则
Array Set 相关
·toContain
异常匹配器
·toThrow:
const throwError = () => { throw new Error('error') } it('can throw error', () => { expect(throwError).toThrow('error') // 判断throw函数可以抛出异常,异常信息为 "error"。也可以写正则 }) |
这里有个小技巧:当我们想忽略掉单个文件中的其他测试用例,只针对一个测试用例做调试的时候,可以加上 .only
it.only('test', () => { // ... }) |
但这并不会忽略其他测试文件的测试用例
三、测试异步代码
这里有三个异步方法,对这三个方法进行代码测试,"www.dell-lee.com/react/api/d…" 会返回 {success: true},
"www.dell-lee.com/react/api/4…" 则不存在。
import axios from 'axios' export function getData1() { return axios.get('http://www.dell-lee.com/react/api/demo.json') } export function getData2(fn) { axios.get('http://www.dell-lee.com/react/api/demo.json').then(res => { fn(res) }) } export function get404() { return axios.get('http://www.dell-lee.com/react/api/404.json') } |
对于异步代码测试,时机很重要,必须保证我们的测试用例在异步代码走完之后才结束。有以下几种办法:
1.done,控制测试用例结束的时机
2.如果函数执行的返回值是 Promise,将这个 Promise return 出去
3.async + await
import {getData1, getData2, get404} from './fetchData/fetchData' it('getData1 方法1', (done) => { getData1().then(res => { expect(res.data).toEqual({ success: true }) done() // 如果不加 done,还没执行到 .then 方法,测试用例已经结束了 }) }) it('getData1 方法2', () => { return getData1().then(res => { expect(res.data).toEqual({ success: true }) }) }) it('getData2 方法2', (done) => { getData2((res) => { expect(res.data).toEqual({ success: true }) done() }) }) it('getData1 方法3', async () => { const res = await getData1() expect(res.data).toEqual({ success: true }) }) /*********** 重点关注 ***********/ it('get404', (done) => { expect.assertions(1) get404().catch(r => { expect(r.toString()).toMatch('404') done() }) }) |
重点讲一下上面的最后一个测试用例,假设我们现在有一个返回的是 404 的接口,我们需要对这个接口测试,期望他返回 404。
我们用 catch 捕获,在 catch 中判断。
但是,假如这个接口返回的不是 404,而是正常返回 200,这个 catch 则不会执行,expect 也不会执行,测试依然是通过的。这不符合我们的预期!所以,我们需要加上 expect.assertions(1) 进行断言:下面一定会执行一个 expect
当然,也可以用 async await 方法进行 404 接口的测试
it('get404 方法3', async () => { await expect(get404()).rejects.toThrow() }) |
本文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理