（五）Jest测试异步代码

方法一：回调函数

这是非常常见的通用处理方式，比如你有一个fetchData(callback)的function用来获取数据，并且在获取完成的时候调用callback 函数，你想测试返回的数据是“peanut butter” ，默认情况下当fetchData执行完成的时候Jest的测试就完成了，这并不是你所期望的那样的去运行。

代码示例：fetechData.js文件代码

import axios from 'axios'
export const fetchData = (fn)=>{
  axios.get("http://www.192.168.0.188:8080/demo.json").then(response)=>{
     fn(response.data) //返回success:true    
  });      
}　　

对应的测试用例fetechData.test.js文件代码

  test('test fetchData返回结果为{successs:data}',(done)=>{
　　fetchData(data)=>{
　　　　expect(data).toEqual({
　　　　　　success:true
　　　　})
　　　　done();//回调函数，测试用例执行完成执行done
　　}

   })

 

　方法一：使用Promise方法

   代码示例：fetechData.js文件代码

  export const fetchData=()=>{
     return axios.get('http://www.192.168.0.188:8080/demo.json');
  }

   对应的测试用例fetechData.test.js文件代码

  test('test fetchData返回结果为{successs:data}',()=>{
　　return fetchData().then((response)=>{
　　　　expect(response.data).toEqual({
　　　　　　success:true
　　　　})
　　}

   })

   也可以修改为

test('test fetchData返回结果为{successs:data}',()=>{
	return expect(fetchData()).resolve.toMatchObject({
				data:{
					success:true
				}
			})	
})

   测试404错误，接口不存在时

test('test fetechData返回404',()=>{
	expect.assertion(1)//1表示expect执行个数
	return fetchData().catch(e=>{
		console.log('e',e);
		expect(e.toString().indexOf('404')>-1).toBe(true)
	})
})

    也可以修改为：

test('test fetechData返回404',()=>{
	return expect(fetchData()).rejects.toThrow();
})

　　

第三种：使用 Async/Await

我相信大家最Async/Await 是比较熟悉的，你可以在测试中使用异步和等待。要编写一个async测试，只需在传递到测试的函数前面使用async关键字。例如上面同样的fetchData场景可以使用下面的实现:

//测试接口正常
test('test fetchData返回结果为{successs:data}',async ()=>{
	await expect(fetchData()).resolve.toMatchObject({
		data{
			success:true	
		}
	})
})

测试异常用例　　

//测试404
test('test fetechData返回404',async ()=>{
	await expect(fetchData()).rejects.toThrow();
})