javascript - 使用 jest 测试 axios.create() 实例

标签 javascript reactjs typescript axios jestjs

我从这个任务中尝试了很多解决方案。我想在没有任何库的情况下测试 axios 实例 api 调用(jest-axios-mock、moaxios、msw 等)。我希望这是可能的,因为我成功测试了简单的 axios 调用( axios.get/axios.post 没有 .create ) 主要问题是我尝试测试 axios 实例调用,在不同的尝试中遇到三个主要错误。

1 axios_instance_1.axiosInstance 不是函数

2 无法读取未定义的属性“then”

3 无法读取未定义的属性“post”

当我尝试绕过模块模拟(jestjs.io/docs/bypassing-module-mocks)时,我得到了这个

我上次的尝试是这样的

axios-instance.ts

import axios from "axios";
export const axiosInstance = axios.create({
    headers: {'X-Custom-Header': 'foobar'}
})

api.ts

import { axiosInstance } from "../instancec/axios-instance";
export const axiosInstanceCounter = () => {
  return axiosInstance({
    method: 'post'
  }).then((data) => {
    console.log(data)
  })
}

axios.test.ts

import { axiosInstanceCounter } from '../features/api/axiosTest';
import { axiosInstance } from '../features/instancec/axios-instance';
import axios, { AxiosResponse } from 'axios';

jest.mock('../features/instancec/axios-instance', () => ({
   const instance = {
     create: jest.fn(),
   };
   return jest.fn(() => instance);
}));

it('Axios instance standart test', async () => {
    (axiosInstance.post as jest.Mock).mockResolvedValueOnce(() =>
      Promise.resolve(),
    );
    await axiosInstanceCounter();
    expect(axiosInstance).toBeCalledTimes(1);
});

我收到的最后一个错误是无法读取未定义的“帖子”。在文件夹 mocks 中创建模拟文件并从那里导出也没有帮助。 我不太明白为什么会发生这种情况,我将非常感谢任何提示,我也尝试过使用 jest.spyOn 选项,但失败了。

添加到解决方案

我用 ts-jest 替换 mocked() 以避免警告

const mockedAxiosInstance = axiosInstance as jest.MockedFunction<
  typeof axiosInstance
>;

最佳答案

这也有效,并且更适合您的目的

import { axiosInstanceCounter } from "../features/api/axiosTest";
import { axiosInstance } from "../features/instancec/axios-instance";

let apiSpy;
describe("getPokemonOptions", () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });
  it("Axios instance standart test", async () => {
    apiSpy = jest.spyOn(axiosInstance, "post");
    apiSpy.mockResolvedValue({});
    await axiosInstanceCounter();
    expect(axiosInstance).toBeCalledTimes(1);
  });
});

关于javascript - 使用 jest 测试 axios.create() 实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71193175/

相关文章:

javascript - Gulp 缩小到同一文件

javascript - 稍后可以在函数中将值绑定(bind)到 Vue 元素吗?

javascript - 在 apache 服务器上部署 React (3000) 和 Express (8000) 应用程序

javascript - React Typescript 类型转换问题 - 解析错误 : Missing Semicolon

typescript - 我怎样才能使旧式类在 typescript 中工作?

javascript - RequireJS 绝对路径产生脚本错误

reactjs - react - 错误 : Invariant failed: You should not use <Link> outside a <Router>

angular - 如何使用 Reactive 表单设置单选按钮值?

javascript - Angular 2 RC5 : No provider for Router

javascript - 单击时设置字符串的值