Issue with Jest mock function failing to trigger axios instance function causing it to return undefined

Question

Issue with Jest mock function failing to trigger axios instance function causing it to return undefined

I initially found a solution on this StackOverflow thread

However, I wanted to add my own helper function that generates a fresh Axios instance with the user's authentication token.

Here is what I came up with:

import axios from "axios";
const mockAxios: jest.Mocked<typeof axios> = jest.createMockFromModule("axios");

// To resolve the axios.create() undefined error!
mockAxios.create = jest.fn(() => {
  return mockAxios;
});

export const createAuthenticatedInstance = () => {
  return mockAxios.create();
};
export default mockAxios;

Why is mockAxios.create() returning undefined?

Even though the 'mockAxios' object and the create function are defined, calling create returns undefined instead of the expected new instance. I could work around this by simply returning mockAxios, but I'm curious about why it doesn't function as intended from the start. My expectation was to get an identical, new instance similar to mockAxios, but it consistently returns undefined.

javascript typescript unit-testing axios jestjs

Answer 1

Answer №1

Developing an auto-mock (within the __mocks__ directory) involves creating a mock of the module. It is important to note that any helper functions should not be included within the module itself, but rather located elsewhere in your code.

For instance:

src/axios.utils.ts (utility module exporting axios and a function)

import axios from "axios";

export const createAuthenticatedInstance = (
  ...args: Parameters<typeof axios.create>
) => {
  return axios.create(...args);
};

export default axios;

src/__mocks__/axios.ts (implementation of axios mock)

const axios: jest.Mocked<typeof import("axios").default> = jest.createMockFromModule(
  "axios"
);

axios.create.mockReturnThis();

export default axios;

src/api.ts (API implementation using axios.util)


import axios from "axios";
import { createAuthenticatedInstance } from "./axios.utils";

const client = createAuthenticatedInstance({
  baseURL: "http://example.com:80/main",
});

export default {
  makeSomeReq: () => client.get<string>("/path"),
};

src/api.spec.ts (test scenario)


import api from "./api";
import axios, { AxiosResponse } from "axios";

jest.mock("axios");

const { get } = axios as jest.Mocked<typeof import("axios").default>;

describe("api", () => {
    it("should have created an axios instance", () => {
      expect(axios.create).toHaveBeenCalledWith({
        baseURL: "http://example.com:80/main",
      });
    });
})

A working example can be found here

Answer 2

Developing an auto-mock (within the __mocks__ directory) involves creating a mock of the module. It is important to note that any helper functions should not be included within the module itself, but rather located elsewhere in your code.

For instance:

src/axios.utils.ts (utility module exporting axios and a function)

import axios from "axios";

export const createAuthenticatedInstance = (
  ...args: Parameters<typeof axios.create>
) => {
  return axios.create(...args);
};

export default axios;

src/__mocks__/axios.ts (implementation of axios mock)

const axios: jest.Mocked<typeof import("axios").default> = jest.createMockFromModule(
  "axios"
);

axios.create.mockReturnThis();

export default axios;

src/api.ts (API implementation using axios.util)


import axios from "axios";
import { createAuthenticatedInstance } from "./axios.utils";

const client = createAuthenticatedInstance({
  baseURL: "http://example.com:80/main",
});

export default {
  makeSomeReq: () => client.get<string>("/path"),
};

src/api.spec.ts (test scenario)


import api from "./api";
import axios, { AxiosResponse } from "axios";

jest.mock("axios");

const { get } = axios as jest.Mocked<typeof import("axios").default>;

describe("api", () => {
    it("should have created an axios instance", () => {
      expect(axios.create).toHaveBeenCalledWith({
        baseURL: "http://example.com:80/main",
      });
    });
})

A working example can be found here

Issue with Jest mock function failing to trigger axios instance function causing it to return undefined

Answer №1

Similar questions

Enhance the function for handling AJAX responses

Dynamically and asynchronously loading numerous LinkedIn share buttons on a page

Unique Input Values in Forms

Click event not triggered when transitioning to Service section in Thinkster tutorial

What is the best way to manage data in a single-page application and retrieve it after the page has been refreshed?

The React-Leaflet curly braces positioned on the top left corner of the map

What is the most efficient way to update a large batch of documents in MongoDB?

Is d3 Version pretending to be a superior version?

Discover the most helpful keyboard shortcuts for Next.js 13!

What steps can be taken to address the build problem with Angular version 13?

Error encountered when attempting to use the .save() method on a [mongoose_model_object] - the function contact.save is

Is it possible to determine if the user is able to navigate forward in browser history?

Overriding a generic property in Typescript allows for a more

How do I programmatically switch the Material-UI/DatePicker to year view in React?

What is the process for transforming a promise outcome into JSON format?

Is it possible to view newly added text in real-time on a separate client in Node.js without relying on socket.io?

Can a type be created that resolves to either of two specific types?

Discovering the value of a key within a JSON object by utilizing a String with JQuery

Upon the initial rendering, Next.js obtains access to the query { amp: undefined }

How can I use jQuery to target elements other than the vertical scrollbar when