Jest测试初学（四）--异步代码的测试方法

异步代码在开发中一般为接口数据的请求，在这样的场景下需要对测试用例做一些特殊的写法。

一 环境配置

请求接口数据涉及跨域，因此在本例子中需要安装axios插件

npm install [email protected] --save

二 回调类型异步函数–测试方法

对于返回的数据，当做参数传到异步函数中做处理

在fetchData.js写获取数据的方法，在数据请求成功之后，会调用参数当中的fn函数，将响应到的数据respone当做fn的参数

export const fetchData = (fn) => {
    axios.get('https://rapi.qingting.fm/recommendations/0/channel_list?more=true&replay=false')
    .then((response) =>{
        fn(response.data.Success)
    });
}

在fetchData.test.js写测试用例，在fetchData中的fn为具体的测试方法，在test中设置done();函数，调用于fetchData的回调函数中，当done();执行完毕，才能证明测试用例有真正的执行。

test('fetchData 返回结果为 ｛ success："ok" ｝', (done) =>{
    fetchData((data) => {
        expect(data).toEqual({
            Success: "ok"
        });
        done();
    });
});

返回的结果为：

三 非回调类型，返回Promise对象的异步函数–测试方法

只发送请求，对于返回的Promise对象和正常、异常状态要自己做处理

在fetchData.js设置两个不同状态的请求方法

//正常状态请求
export const fetchData = () => {
    return axios.get('https://rapi.qingting.fm/recommendations/0/channel_list?more=true&replay=false');
}
//异常状态请求
export const fetchData = () => {
    return axios.get('https://rapi.qingting.fm/recommendation1s/001/channel_list?more=true&replay=false');
}

-对于正常状态下的请求用例测试：

1. 运用Promise链式调用then

test('fetchData 返回结果为 ｛ success："ok" ｝', () =>{
    return fetchData().then((response) => {
        expect(response.data.Success).toEqual({
            Success: "ok"
        })
    });
});

2. 调用Promise的两个参数：resolve，reject，分别代表这个Promise实例成功之后的回调函数和失败之后的回调函数

test('fetchData 返回结果为 ｛ success："ok" ｝', () =>{
    //expect(fetchData()).resolves拿到的是返回的所有请求结果
    return expect(fetchData()).resolves.toMatchObject({
        data: {
            Success:"ok"
        }
    });
});

3. 用 async/await 来处理异步

test('fetchData 返回结果为 ｛ success："ok" ｝', async() =>{
    await expect(fetchData()).resolves.toMatchObject({
        data: {
            Success:"ok"
        }
    });
});

test('fetchData 返回结果为 ｛ success："ok" ｝', async() =>{
    const response = await fetchData();
    expect(response.data).toEqual({
        Success:"ok"
    })
});

实际获取到的对象为：

• 对于异常状态下的请求用例测试：

1.运用Promise链式调用catch捕获异常信息

当返回的结果为404的时候，必须执行一次expect，expect.assertions(1);满足条件才算测试完成，.assertions(n)添加预期必须通过的expect个数。

test('fetchData 返回结果为 404', () =>{
    expect.assertions(1);
    return fetchData().catch((e) => {
        console.log(e.toString());
        expect(e.toString().indexOf('404')> -1).toBe(true);
    });
});

2. 调用Promise的两个参数：resolve，reject，分别代表这个Promise实例成功之后的回调函数和失败之后的回调函数

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

3.用 async/await 来处理异步

test('fetchData 返回结果为 404', async() =>{
    await expect(fetchData()).rejects.toThrow();
});

4.结合async/await 和try{}catch(){}捕获异常信息

test('fetchData 返回结果为 404', async() =>{
    expect.assertions(1);
    try {
        await fetchData();
    } catch(e) {
        expect(e.toString()).toEqual('Error: Request failed with status code 404');
        console.log(e.toString());
    }
});