前端自动化测试jest教程4-异步代码测试

Jest教程：异步代码测试实战

最新推荐文章于 2025-07-01 22:43:52 发布

原创

最新推荐文章于 2025-07-01 22:43:52 发布 · 969 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #前端 #vue.js #html5

本教程详细讲解如何在Jest中测试前端异步代码，从安装axios到在测试用例中处理异步请求，包括4种不同的测试方法。通过实践，加深对前端自动化测试的理解。

在这里插入图片描述

准备条件

以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章

这节教程主要讲解在jest中怎样去测试异步代码，将第1节的代码复制一份，并且把index.js和index.test.js文件内容全部清空

在实际开发中，肯定会用到异步请求，请求后台的接口数据，这里我们就使用`axios` 来请求数据

npm install axios --save 安装axios
在 index.js 中引入axios

import axios from 'axios'

在 `index.js` 中写异步代码

这里我们将一般请求的数据的写法都写进来

import axios from 'axios'

/**
 * 传入一个回调函数，获取数据后执行
 */
export function featchData1(fn) {
  // 实际开发应为接口路径
  axios.get('https://bird.ioliu.cn/v2/?url=https://music.163.com/store/api/searchsuggest/get')
    .then(response => {
      fn(response.data)
    })
}

/**
 * 返回一个promis