3、Jest异步代码的测试方法

一、补充：让Jest支持import和ES6语法

Jest是不支持import...from....这种形式，如果使用就会报错，因为Jest默认支持的是CommonJS规范，也就是Node.js中的语法，他只支持require这种引用。

其实解决这个问题，直接使用Babel就可以把代码转换成CommonJS代码，然后就可以顺利进行测试了。

安装命令：

npm install @babel/core @babel/preset-env -D

然后在项目根目录下新建一个.babelrc的文件：

{
    "presets":[
        [
                "@babel/preset-env",{
                "targets":{
                    "node":"current"
                }
            }
        ]
    ]
}

这时我们就可以使用Es6的代码了。

二、Jest异步代码的测试方法

免费测试接口来源：www.free-api.com/doc/322

1、回调函数式

asyncTest.js文件如下：

const axios = require('axios') ;

const asyncTest1 = (fn,tel) =>{
    axios.get(`https://api.asilu.com/phone/?phone=${tel}`).then((res)=>{
        fn(res.data)
    })
 }
 
module.exports= {asyncTest1}

asyncTest.test.js文件如下：

import {asyncTest1} from './asyncTest'

test('asyncTest1 回调函数式测试',(done)=>{
    asyncTest1((data)=>{
        expect(data).toEqual({
            "province": "海南",
            "city": "海口",
            "postcode": "570000",
            "areacode": "0898",
            "sp": "移动",
            "phone": "1888****966"
        })
 
    },"1888****966")

    done() //加入一个done方法，保证我们的回调已经完成了，这时候我们表示测试完成。

   })

这里的done()很重要，如果不加这个，测试虽然可以通过，但是是有问题的，因为方法还没有等到回调，结果已经完成了，所以这时候等于没测试完，只是方法可用，就返回了测试结果，这种结果是不正确的。

2、直接返回promise

asyncTest.js文件如下：

const asyncTest2 = (tel) =>{
   return axios.get(`https://api.asilu.com/phone/?phone=${tel}`)
}

asyncTest.test.js文件如下：

test('asyncTest2 直接返回promise',()=>{
   return asyncTest2('1888****966').then((res)=>{
        expect(res.data).toEqual({
            "province": "海南",
            "city": "海口",
            "postcode": "570000",
            "areacode": "0898",
            "sp": "移动",
            "phone": "1888****966"
        })
    })
})

这里要注意的是要使用return才能测试成功，如果没有加return，就和上面的问题，是不严谨的。

3、不存在(404)测试方法

在工作中有时候会测试异步接口不存在的需求，比如有些后台需求不允许前台访问时，这时候就会返回404（页面不存在）

asyncTest.js文件如下：

const asyncTest3 = (tel) =>{
    return axios.get(`https://api.asilu.com/phone11/?phone=${tel}`)
}

asyncTest.test.js文件如下：

test('asyncTest3 404测试', ()=>{
    expect.assertions(1)  // 断言，必须执行一次expect
    return asyncTest3('18889****66').catch((e)=>{
      expect(e.toString().indexOf('404')> -1).toBe(true)
    })
})

这里expect.assertions(1)表示断言，必须执行一次expect,如果不加的话，把异步请求改正确后，再走一下测试，还是可以通过测试的。

4、async...await使用

asyncTest.js文件如下：

const asyncTest4 = (tel) =>{
    return axios.get(`https://api.asilu.com/phone/?phone=${tel}`)
}

asyncTest.test.js文件如下：

test('asyncTest4 async...await测试',async()=>{
    await expect(asyncTest4('1888****966')).resolves.toMatchObject({
        data:{
            "province": "海南",
            "city": "海口",
            "postcode": "570000",
            "areacode": "0898",
            "sp": "移动",
            "phone": "1888****966"
        }
    })
 })

也可以简化一下，更直观：

 test('asyncTest4 async...await测试', async()=>{
    const response  = await asyncTest4('1888****966')
    expect(response.data).toEqual({
        "province": "海南",
        "city": "海口",
        "postcode": "570000",
        "areacode": "0898",
        "sp": "移动",
        "phone": "1888****966"
    })
})

学习日期：2022/1/20

视频参考：www.bilibili.com/video/BV1yA…

文档参考：jspang.com/detailed?id…

仅供个人学习和记录