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

The NavBar element is failing to update when the state changes

Is it possible for an Interface's property to be a type that contains an array?

What is the reason behind eslint not permitting the rule option @typescript-eslint/consistent-type-imports?

What steps can be taken to ensure that all object properties become reactive?

Combining TypeScript and ReactJS with RequireJS: A guide to importing react-dom in TypeScript

Unable to use console log in shorthand arrow function while working with Typescript

What steps do I need to take in order to set up InfluxDB with Nest

"Error: The React TypeScript variable has been declared but remains

Generate types based on properties of a nested interface dynamically

Why do I keep getting an ExpressionChangedAfterItHasBeenChecked error after trying to update a random color in an

Excluding node modules when not included in tsconfig

Issue with Angular Reactive form: Checkbox checked property not binding correctly when the page initially loads

Accessing Nested Arrays in Angular 8: Retrieving Data in HTML Template from Multiple Layers of Arrays

convert a JSON object into an array field

Implementing a feature in ReactJS that allows users to upload multiple images in base64 format

Angular fixes corrupted Excel files

What are the properties used in functional components of React?

incorrect implementation of react lifecycle phases

The message "jest command not recognized" appears

Utilizing *ngfor in Angular 7 to Group and Display Data