如何：通过带有打字稿的配置时模拟 axios

Posted 2023-03-13

【中文标题】如何：通过带有打字稿的配置时模拟 axios

【英文标题】：How to: mock axios when passed a config w/ typescript

【发布时间】：2019-11-20 12:09:55

【问题描述】：

当 axios 使用配置约定 axios(passAConfigObj) 时，我无法模拟它。当它是axios.get 或axios.post 时，我没有问题嘲笑。不尝试引入库，因为我觉得可以做到这一点。

我尝试模拟将要使用的请求方法axios.post。我尝试模拟 axios 并给它一个返回值，但想要一个 AxiosPromise<any>。

const mockedAxios = mocked(axios)

mockedAxios.mockImplementationOnce(() => Promise.resolve(2))

error: TS2322: Type 'Promise<number>' is not assignable to type AxiosPromise<any>

// auth.spec.ts
import  getAuthToken  from '../auth'

import axios from 'axios'
import  mocked  from 'ts-jest/utils'

jest.mock('axios')

describe('getAuthToken', () => 
  const mockedAxiosPost = mocked(axios)

  it('should return ', () => 
    mockedAxiosPost.mockImplementationOnce(() =>
      Promise.resolve( data: 'response.data' )
    )

    const authToken = getAuthToken()

    expect(authToken).toEqual()
    expect(mockedAxiosPost).toHaveBeenCalledTimes(1)
    expect(mockedAxiosPost).toHaveBeenCalledWith()

  )
)

// auth.ts
import axios from 'axios'

export const getAuthToken = () => 

  const options = 
    url: `url`,
    method: 'POST',
    headers: 
      Authorization: ''
      'Content-Type': '',
    ,
    data: ,
  

  return axios(options)
    .then(response => 
      return response
    )
    .catch(error => 
      console.log(error.response)
    )

我希望通过配置的 axios 在内部调用 axios.post 从而工作/通过我的测试。

我还有其他适用于这种测试风格的 axios.post 和 axios.get 实现，所以这不是问题。显然我可以将我的代码更改为使用axios.post，但在这一点上，我比什么都好奇。在此先感谢:)

【参考方案1】：

这已经存在一年了，我在尝试解决同样的问题时偶然发现了这个线程。

我有一段时间摸不着头脑，但最终我设法破解了它。

一些上下文可以更好地理解我是如何解决它的：

我嘲笑axios 与jest 一起使用，并在一个项目中使用Typescript。

也就是说，这就是我最终要做的：

__mocks__/axios.ts：

import  AxiosResponse  from 'axios';

const axiosResponse: AxiosResponse = 
  data:  falseProp: 'value' ,
  status: 200,
  statusText: 'OK',
  config: ,
  headers: ,
;

export default 
  create: jest.fn((config) => 
     const wrapFunction = (param: any) => 
      return Promise.resolve(axiosResponse)
     

     return wrapFunction
  )
;

这是我在尝试测试的代码中使用axios 的示例：

src/MyRequestClass.ts：

import axios,  AxiosInstance, AxiosError  from 'axios'

const axiosInstance = axios.create(
  baseURL: 'https://fake-api-url',
  headers: 
      common: 
          Authorization: authToken
      
  
)

const request = 
  method: 'GET',
  url: 'https://fake-api-url/endpoint',
  params: ,
  data: ,
  headers: 


const response = await axiosInstance(request)

基本上，我所做的就是让create 方法返回一个function，它接收您提到的config 对象（在我的例子中是request 对象）并始终解析Promise。

当然，您也可以使 Promise 失败，具体取决于您的测试用例。

希望这对其他人有帮助！