用axios远程的请求数据。要使用axios就需要先进行安装，直接使用npm或yarn进行安装就可以了
npm install axios@0.19.0 --save
安装完成后，可以打开package.json看一下安装结果和版本，我这里使用的是0.19.0(如果你是其它版本，可能这个方法会出错，所以你最好和我使用一样的版本)。
异步代码的测试方法-1
一个异步请求地址
http://a.jspang.com/jestTest.json
安装好axios以后，在项目根目录下面，新建一个文件fetchData.js文件，然后编写代码如下：
import axios from 'axios'
export const fetchData = (fn)=>{
axios.get('http://a.jspang.com/jestTest.json').then((response)=>{
fn(response.data)
})
}
测试文件fetchData.test.js在项目根目录下，新建一个fetchData.test.js文件
import { fetchData } from './fetchData.js'
test('fetchData 测试',()=>{
fetchData((data)=>{
expect(data).toEqual({
success: true
})
})
})
注意这样写是由问题的，因为方法还没有等到回调，我们的结果已经完成了，所以这时候你对于没测试完，只是方法可用，就返回了测试结果，这种结果是不保证正确的。
比如现在我们把请求的地址后边加一个1,这时候才测试，依然是正确的。
axios.get('http://a.jspang.com/jestTest1.json').then((response)=>{
fn(response.data)
})
所以我们必须加入一个done方法，保证我们的回调已经完成了，这时候我们表示测试完成。
import { fetchData } from './fetchData.js'
test('fetchData 测试',(done)=>{
fetchData((data)=>{
expect(data).toEqual({
success: true
})
done()
})
})
异步代码的测试方法-2直接返回promise
还有一种方法式直接返回一个promise值，这样的方法在工作中也式经常使用的.
fetchData.js文件，然后编写下面的代码:
export const fetchTwoData = ()=>{
return axios.get('http://a.jspang.com/jestTest.json')
}
从代码中可以看出，我们直接只用了Return返回了异步请求的promise值，这样的方法在实际工作中也经常使用。
打开fetchData.test.js文件，然后新写一个测试用例，在写之前记得先把fetchTwoData方法引过来。
import { fetchData , fetchTwoData } from './fetchData.js'
引入之后，编写测试用例，代码如下:
test('FetchTwoData 测试', ()=>{
return fetchTwoData().then((response)=>{
expect(response.data).toEqual({
success: true
})
})
})
这部分代码需要注意的是要使用return才能测试成功，这个坑我学习的时候也踩到了，所以给大家说一下，希望大家不要踩坑。
异步代码的测试方法-3不存在接口的测试方法
后台需求不允许前台访问时，这时候就会返回404（页面不存在），这时候在测试时也存在一些坑
继续打开fetchData.test.js文件，然后编写测试代码如下，注意这个地址是不存在的，也就是返回404
export const fetchThreeData = ()=>{
return axios.get('http://a.jspang.com/jestTest_error.json')
}
这时候可能很多小伙伴说测试404直接用catch就可以了，很简单，然后代码写成了这样。
test('FetchThreeData 测试', ()=>{
return fetchThreeData().catch((e)=>{
//console.log(e.toString())
expect(e.toString().indexOf('404')> -1).toBe(true)
})
})
但这样是错误的，比如现在我们把异步请求代码改正确后，我们再走一下测试，还是可以通过测试的。 现在把网址改成正确的:(http://a.jspang.com/jestTest.json)
那这是为什么那？因为测试用例使用了catch方法，也就是说只有出现异常的时候才会走这个方法，而现在没有出现异常，就不会走这个测试方法，Jest就默认这个用例通过了测试。
这个也算是一个坑，想改这个坑也非常简单，只要使用expect.assertions(1)就可以了，这个代码的意思是“断言，必须需要执行一次expect方法才可以通过测试”。
修改过后的代码就变成了这个样子
test('FetchThreeData 测试', ()=>{
expect.assertions(1) // 断言，必须执行一次expect
return fetchThreeData().catch((e)=>{
expect(e.toString().indexOf('404')> -1).toBe(true)
})
})
这时候测试用例就无法正常通过测试了，因为此时我们的地址是存在并正确返回结果的。我们需要改成错误的地址，才能通过测试。(http://a.jspang.com/jestTest_error.json)
异步代码的测试方法-4async...await
上面异步测试用例时我使用了return的形式，这只是其中的一种方法，还有另一种方法，就是使用async...await...的这种语法形式来写测试用例。两种语法没有好坏之分，就看自己习惯和容易理解那种方法。
还是文件fetchData.js中，编写一个新的方法:
export const fetchFourData = ()=>{
return axios.get('http://a.jspang.com/jestTest.json')
}
注意，这时候地址是正确的，也就是可以正常返回结果的。
async...await编写测试代码
这时候我们的代码使用async....await...的形式，这里我们还使用了resolves用于把现有对象转换成Promise对象，然后使用Jest中的toMatchObject进行匹配对象中的属性。
test('FetchFourData 测试', async()=>{
//resolves把现有对象转换成Promise对象，
//toMatchObject 匹配对象中的属性
await expect(fetchFourData()).resolves.toMatchObject({
data:{
success:true
}
})
})
写完上面的代码就可以出正确的结果了，但是这种方法还是有点抽象的，需要用resolves转换一下。有没有简单方法，答案是肯定的。我们可以把上面的测试方法写成这样。
test('FetchFourData 测试', async()=>{
const response = await fetchFourData()
expect(response.data).toEqual({
success : true
})
})
这就是用async...await...来进行异步代码测试。
网友评论