I encountered an issue with Typescript Jest where it was unable to find the mock or mockReturnedValue functions on the types I

Question

I encountered an issue with Typescript Jest where it was unable to find the mock or mockReturnedValue functions on the types I

Let's test out this interesting class:

//RequestHandler.js
import axios, {AxiosInstance} from 'axios';
import settings from './settings';

const axiosHandler: AxiosInstance = axios.create({
  baseURL: 'http://localhost:8081',
});

export default class RequestHandler {
  public async getData<$ResponseType = any>(url: string): Promise<void> {
    const response = await axiosHandler.get(url);
    return response.data;
  }
}

While attempting to create a test file for this class, I encountered some challenges when it came to mocking axios. Despite trying various methods such as spyOn and automatic mocks, I couldn't get them to work effectively. Below is a snippet from the unsuccessful test file that has me puzzled:

// RequestHandler.test.js
import axios from 'axios';
import RequestHandler from './RequestHandler';

interface ITestDataStructure {
  content: string
}

jest.mock('axios');

describe('RequestHandler Testing', () => {
  it('should correctly utilize axios get with the specified relativeUrl', async () => {
    const mockedGet = jest.fn();

    axios.create.mockReturnValue({
      get: mockedGet
    });

    mockedGet.mockResolvedValueOnce({
      content: 'example'
    });

    const data = await new RequestHandler().getData<ITestDataStructure>('/someEndpoint');
    expect(mockedGet.mock.calls.length).toEqual(1);
    expect(data).toEqual({
      content: 'example'
    });
  });
});

Upon running the test, an error message is displayed -

 TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    src/services/RequestHandler.test.ts:15:18 - error TS2339: Property 'mockReturnValue' does not exist on type '(options?: AxiosRequestConfig | undefined) => AxiosInstance'.

    15     axios.create.mockReturnValue({

This error is understandable since the axios type definition doesn't include the 'mockReturnValue' method for 'create'. How can we inform TypeScript that jest has made changes in this case?

typescript axios jestjs mocking

Answer 1

Answer №1

Transform the mock method into a jest.Mock, like so:

import axios from "axios"
import Request from "./Request";

// Set up an Axios mock
// Jest will hoist this above the imports, so order doesn't matter
// Refer to https://jestjs.io/docs/manual-mocks#using-with-es-module-imports
jest.mock("axios", () => ({
  create: jest.fn()
}))

// Customize the `create` mock method
(axios.create as jest.Mock).mockReturnValue({
  get: getMock
})

A simpler alternative is to utilize thejest.mocked()function

The mocked() tool wraps types of the source object and its deeply nested members with type definitions of Jest's mock function.

jest.mocked(axios.create).mockReturnValue({ get: getMock });

Answer 2

Transform the mock method into a jest.Mock, like so:

import axios from "axios"
import Request from "./Request";

// Set up an Axios mock
// Jest will hoist this above the imports, so order doesn't matter
// Refer to https://jestjs.io/docs/manual-mocks#using-with-es-module-imports
jest.mock("axios", () => ({
  create: jest.fn()
}))

// Customize the `create` mock method
(axios.create as jest.Mock).mockReturnValue({
  get: getMock
})

A simpler alternative is to utilize thejest.mocked()function

The mocked() tool wraps types of the source object and its deeply nested members with type definitions of Jest's mock function.

jest.mocked(axios.create).mockReturnValue({ get: getMock });

Answer 3

Answer №2

Building on the highest-rated response, I personally advocate for preserving type definitions during type casting. One way to achieve this is by rephrasing it as follows:

(fetch as jest.Mocked<typeof fetch>).request.mockReturnValue({
  post: postMock
});

Answer 4

Building on the highest-rated response, I personally advocate for preserving type definitions during type casting. One way to achieve this is by rephrasing it as follows:

(fetch as jest.Mocked<typeof fetch>).request.mockReturnValue({
  post: postMock
});

Answer 5

Answer №3

To effectively replace the axios.create method, utilize a Jest mock function like this:

axios.create = jest.fn();

This will enable you to easily define its return value.

Answer 6

To effectively replace the axios.create method, utilize a Jest mock function like this:

axios.create = jest.fn();

This will enable you to easily define its return value.

Answer 7

Answer №4

This particular scenario is related to a different library, yet it involves a similar task. Upon converting the import into

jest.Mocked<typeof MyImport>

, I found it necessary to directly assign mock functions to its properties rather than utilizing the mockReturnValue method. This alternative method proved to be effective.

import CustomLogger from '../../custom-logger'
import { configureUtilities } from './utilities'

jest.mock('../../custom-logger')
const mockCustomLogger = CustomLogger as jest.Mocked<typeof CustomLogger>

describe('configureUtilities', () => {
  describe('when custom logger functionality is available', () => {
    beforeEach(() => {
      mockCustomLogger.log = jest.fn()
    })
    it('integrates the custom logger utilities', () => {
      const utilities = configureUtilities()
      expect(utilities).toHaveLength(1)
    })
  })

  describe('when custom logger functionality is not available', () => {
    beforeEach(() => {
      mockCustomLogger.log = undefined
    })
    it('does not integrate the custom logger utilities', () => {
      const utilities = configureUtilities()
      expect(utilities).toHaveLength(0)
    })
  })
})

Answer 8

This particular scenario is related to a different library, yet it involves a similar task. Upon converting the import into

jest.Mocked<typeof MyImport>

, I found it necessary to directly assign mock functions to its properties rather than utilizing the mockReturnValue method. This alternative method proved to be effective.

import CustomLogger from '../../custom-logger'
import { configureUtilities } from './utilities'

jest.mock('../../custom-logger')
const mockCustomLogger = CustomLogger as jest.Mocked<typeof CustomLogger>

describe('configureUtilities', () => {
  describe('when custom logger functionality is available', () => {
    beforeEach(() => {
      mockCustomLogger.log = jest.fn()
    })
    it('integrates the custom logger utilities', () => {
      const utilities = configureUtilities()
      expect(utilities).toHaveLength(1)
    })
  })

  describe('when custom logger functionality is not available', () => {
    beforeEach(() => {
      mockCustomLogger.log = undefined
    })
    it('does not integrate the custom logger utilities', () => {
      const utilities = configureUtilities()
      expect(utilities).toHaveLength(0)
    })
  })
})

Answer 9

Answer №5

I successfully resolved this issue using axios-mock-adapter. It worked flawlessly for me and even proved to be useful for handling nested calls.

// src/request.ts
import axios from "axios";
export const axiosCreate = axios.create();
export async function someRequest(){
  axiosCreate.get("http://localhost/users");
}

// src/__test__/request.test.ts
import * as request from ".../request";
import MockAdapter from "axios-mock-adapter";
const mock = new MockAdapter(request.axiosCreate);
it("Testing mock", async () => {
  mock.onGet("http://locahost/users").reply(200, "ok");
  const resp = await request.someRequest();
  expect(resp).toEqual("ok");
});

Hopefully, this solution will benefit someone else in a similar situation.

Answer 10

I successfully resolved this issue using axios-mock-adapter. It worked flawlessly for me and even proved to be useful for handling nested calls.

// src/request.ts
import axios from "axios";
export const axiosCreate = axios.create();
export async function someRequest(){
  axiosCreate.get("http://localhost/users");
}

// src/__test__/request.test.ts
import * as request from ".../request";
import MockAdapter from "axios-mock-adapter";
const mock = new MockAdapter(request.axiosCreate);
it("Testing mock", async () => {
  mock.onGet("http://locahost/users").reply(200, "ok");
  const resp = await request.someRequest();
  expect(resp).toEqual("ok");
});

Hopefully, this solution will benefit someone else in a similar situation.

Answer 11

Answer №6

import axios from 'axios';
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

beforeEach(() => {
jest.resetAllMocks();
mockedAxios.get.mockResolvedValue({
data: []
});
});

The axios mock only worked for me using this approach.

Answer 12

import axios from 'axios';
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

beforeEach(() => {
jest.resetAllMocks();
mockedAxios.get.mockResolvedValue({
data: []
});
});

The axios mock only worked for me using this approach.

I encountered an issue with Typescript Jest where it was unable to find the mock or mockReturnedValue functions on the types I

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

In Angular 17, is there a way to trigger a component's method when a Signal is modified?

Using Typescript to replicate Object.defineProperties

Solve the TypeScript path when using jest.mock

Guide on running PHP (WAMP Server) and Angular 2 (Typescript with Node.js) concurrently on a local PC

There is an implicit 'any' type error binding element 'currency' in Graphql React Typescript

Angular 7 throwing errors of undefined variables

The attribute 'data' is not found in the type 'IntrinsicAttributes & IProps'. Error code: ts(2322)

Deciphering the intricacies of AWS-Config Rules and Alterations in Configuration

Using asynchronous functions in a loop in Node.js

How can a button click function be triggered in another component?

Error: ngModel does not reflect dynamic changes in value

Is there a way to determine the quantity of lines within a div using a Vue3 watcher?

The MaterialTable component is indicating that there is no property called 'tableData' on the IPerson type

limit the data types of values within an object using Typescript

Generating dynamic components using React and TypeScript

incomplete constructor for a generic class

I am unable to refresh the table data in Angular

Connect ngx-time picker to form input in Angular

The functionality of Angular/Typescript class.name appears to fail during a production build

Leveraging Angular and HTML to efficiently transfer the selected dropdown value to a TypeScript method upon the user's button click