使用 jest 进行多个 axios 调用答案

【问题标题】：Make multiple axios calls using jest使用 jest 进行多个 axios 调用
【发布时间】：2021-01-26 14:00:53
【问题描述】：

我正在使用 typescript 处理 rest js，我正在尝试使用 jest 模拟多个 API 调用以进行单元测试。

我的api调用格式如下：

await axios.request({
    method: 'POST',
    url: //api url,
      data: {},
    headers: {}
  })
  .then()
  .catch()

我在嘲笑 axios 如下：

jest.mock('axios', () => {
  return {
    request: jest.fn().mockResolvedValue({
      data: ['responseData', 'responseData1']
        headers: //response header
    })
  }
});

api调用的测试用例创建如下：

expect(axios.request).toHaveBeenCalled(); expect(axios.request).toHaveBeenCalledWith({ 
method: 'POST', 
url: //api url, 
data: {}, 
headers: {} 
});

对于多个 API 调用，我使用不同的响应数据对其进行多次模拟，但它将最后一个模拟值作为测试用例中所有 API 调用的响应。

例如：对于多个数据模拟，例如：

jest.mock('axios', () => {
  return {
    request: jest.fn().mockResolvedValue({
      data: ['responseData', 'responseData1']
        headers: //response header
    })
  }
});

jest.mock('axios', () => {
  return {
    request: jest.fn().mockResolvedValue({
      data: ['secondResponseData', 'secondResponseData1']
        headers: //response header
    })
  }
});

当我运行测试用例时，我得到的所有 api 的响应如下：

data: ['secondResponseData', 'secondResponseData1']
headers: //response header

data: ['secondResponseData', 'secondResponseData1']
headers: //response header

代替：

data: ['responseData', 'responseData1']
headers: //response header

data: ['secondResponseData', 'secondResponseData1']
headers: //response header

我不知道如何在测试用例中使用正确的 api 调用来模拟正确的响应。有什么方法可以模拟 API 调用的正确响应？

【问题讨论】：

查看the docs，您可以链接...Once 方法来排队多个响应。
我试过了，但它不起作用。我说这不是那些 ...once 方法的功能
请提供minimal reproducible example - JavaScript 区分大小写，例如mockResolvedValueOncedefinitely exists.
使用 mockResolvedValueOnce 我的所有 api 调用也得到了相同的响应。
再次，请给minimal reproducible example说明问题。

标签： reactjs axios jestjs mocking

【解决方案1】：

基本用法。

import * as axios from "axios";

// Mock out all top level functions, such as get, put, delete and post:
jest.mock("axios");

// ...

test("good response", () => {
  axios.get.mockImplementation(() => Promise.resolve({ data: {...} }));
  // ...
});

test("bad response", () => {
  axios.get.mockImplementation(() => Promise.reject({ ... }));
  // ...
});

带有响应代码。

axios.get.mockImplementation(() => Promise.resolve({ status: 200, data: {...} }));

基于参数。

axios.get.mockImplementation((url) => {
    if (url === 'www.example.com') {
        return Promise.resolve({ data: {...} });
    } else {
        //...
    }
});

【讨论】：

你好，我的api调用不是axios.get的格式...我使用api调用的格式如下：await axios.request({ method: 'POST', url: / /api url, data: {}, headers: {} }) .then() .catch() 由于这种格式，我无法以您提供的形式编写测试用例。

【解决方案2】：

试试这样的：

axiosPostSpy = jest.spyOn(axios, 'post').mockImplementation((url) => {
  if( url === 'www.test.com?key=serverKey') {
    return {
      data: {
        success: false,
      },
    };
  } else {
    return {
      data: {
        success: true,
      },
    };
  }
});

【讨论】：