首页 > 其他分享 >如何使用 jest 测试使用 axios 的 httpClient?

如何使用 jest 测试使用 axios 的 httpClient?

时间:2023-09-16 23:04:02浏览次数:34  
标签:axios const 测试 url jest data mock httpClient

要使用Jest测试使用axios的httpClient,您可以使用Jest提供的模拟功能来伪造对外部API的请求和响应。下面是一个示例测试的代码:

首先,安装所需的依赖:

npm install axios axios-mock-adapter jest --save-dev

然后,创建一个名为httpService.test.js的测试文件,编写以下代码:

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { post } from './httpService';

describe('httpService', () => {
  let mock;

  beforeEach(() => {
    mock = new MockAdapter(axios);
  });

  afterEach(() => {
    mock.reset();
  });

  it('should make a POST request', async () => {
    const url = 'http://test.com/api';
    const data = { name: 'John', age: 30 };
    const responseData = { success: true };

    mock.onPost(url, data).reply(200, responseData);

    const result = await post(url, data);

    expect(result).toEqual(responseData);
  });

  it('should throw an error for failed request', async () => {
    const url = 'http://test.com/api';
    const data = { name: 'John', age: 30 };

    mock.onPost(url, data).reply(500);

    await expect(post(url, data)).rejects.toThrow('Error in POST request');
  });
});

在上面的示例中,我们使用MockAdapter来创建一个虚拟的axios实例,然后设置它的响应。在第一个测试中,我们模拟了一个成功的POST请求,并验证返回的数据是否与预期的responseData匹配。在第二个测试中,我们模拟了一个失败的POST请求,并验证是否抛出了一个包含特定错误消息的错误。

运行这个测试文件时,Jest将使用模拟的axios进行请求,而不会实际发送请求到外部API。这样您就可以测试您的httpService中的逻辑,包括对API响应的处理。

请注意,这个示例只测试了httpService的post方法。根据您的需求,您可以编写更多的测试来验证不同的场景和方法。

标签:axios,const,测试,url,jest,data,mock,httpClient
From: https://blog.51cto.com/M82A1/7496830

相关文章

  • 二、 Axios入门—Axios源码分析
    一、axios与Axios的关系从语法上来说:axios不是Axios的实例从功能上来说:axios是Axios的实例axios是Axios.prototype.request函数bind()返回的函数axios作为对象有Axios原型对象上的所有方法,有Axios对象上所有属性二、instance与axios的区别相同:(1)都是一......
  • axios封装-token过期请求中断
    importaxiosfrom'axios'import{useUserStore}from'@/pinia'import{ElMessage,ElMessageBox}from'element-plus'importqsfrom'qs'constservice=axios.create({baseURL:'/api',withCredenti......
  • axios+formdata上传多个文件(随手记录一下)
    <template><el-row><el-col:span="20":offset="4"style="text-align:left"><spanstyle="margin-left:200px">上传图片</span><el-uploadstyle="......
  • vue3.*安装axios具体步骤
    在项目的命令行处使用命令进行axios的安装npminstallaxiosvue-axios--legacy-peer-deps--save其余的命令可能会报错;......
  • Ajax 和 axios 调用接口的使用
     一、前提了解:服务器:负责存放和对外提供资源的电脑‘请求-处理-响应’客户端:在上网过程中,负责获取和消费资源的电脑URL:统一资源定位符,协议域名端口号资源的请求方式: 1.get:获取服务器资源 2.post:向服务器提交数据 3.其他:put修改、delete删除、fetch批量二、Ajax的......
  • Axios 的 put 请求实践:实现前端与后端的数据同步
    在前端开发中,我们经常需要与后端服务器进行数据交互。其中,PUT 请求是一种常用的方法,用于向服务器发送更新或修改数据的请求。通过发送PUT请求,我们可以更新服务器上的资源状态。Axios是一个流行的JavaScript库,用于在浏览器和 Node.js 中进行 HTTP 请求。它提供了简单易用......
  • 关于 axios 第一次请求,headers 无法获取到token,需要刷新后才可获取到的解决方案
    constinstance=axios.create({//baseURL:"http://175.30.32.3:48080",timeout:120000,headers:{Authorization:'Bearer'+getToken(),'Content-Type':'application/json;charset=UTF-8'},//开始是全局添加的......
  • axios封装后发get请求
    ruoyi的前端对axios进行了封装,让我们发get请求或者是post请求更加方便了。ruoyi对axios的封装在下面文件中:打开文件,可以看到它有三个显眼的方法,分别是request拦截器、response拦截器和通用下载方法。request拦截器对我们发送的请求进行了封装,当我们发送Get请求,那么我们携带参数......
  • vue3+ts Axios封装—重复请求拦截
    创建好vue3项目1.安装Axios与ElementPlusAxios安装npminstallaxiosElementPlus安装官网入口:https://element-plus.gitee.io/zh-CN/npminstallelement-plus--saveElement主要用到信息提示与全屏加载动画2.在src目录下创建api文件夹和utils文件夹api......
  • HttpClient在SpringBoot中的使用
    一、简介HttpClient是ApacheJakartaCommon下的子项目,可以用来提供高效的、最新的、功能丰富的支持HTTP协议的客户端编程工具包。HttpClient是一个HTTP通信库、一个工具包,它只提供一个通用浏览器应用程序所期望的功能子集,与浏览器相比是没有界面的。二、引入依赖<!--httpcli......