Typescript and Jest: Avoiding type errors on mocked functions

Question

When wanting to mock external modules with Jest, we can use the jest.mock() method to auto-mock functions on a module.

We can then manipulate and interrogate the mocked functions on our mocked module as we wish.

For example, consider the following contrived example for mocking the axios module:

import myModuleThatCallsAxios from '../myModule';
import axios from 'axios';

jest.mock('axios');

it('Calls the GET method as expected', async () => {
  const expectedResult: string = 'result';

  axios.get.mockReturnValueOnce({ data: expectedResult });
  const result = await myModuleThatCallsAxios.makeGetRequest();

  expect(axios.get).toHaveBeenCalled();
  expect(result).toBe(expectedResult);
});

The above will run fine in Jest but will throw a Typescript error:

Property 'mockReturnValueOnce' does not exist on type '(url: string, config?: AxiosRequestConfig | undefined) => AxiosPromise'.

The typedef for axios.get rightly doesn't include a mockReturnValueOnce property. We can force Typescript to treat axios.get as an Object literal by wrapping it as Object(axios.get), but:

What is the idiomatic way to mock functions while maintaining type safety?

Maybe another approach is to use assignment like axios.get = jest.fn() i.e. github.com/dvallin/vuejs-tutorial/blob/… — yurzui
– yurzui, Commented Jul 29, 2018 at 6:32

hutabalian · Accepted Answer · 2018-11-08 09:21:24Z

200

Add this line of code const mockedAxios = axios as jest.Mocked<typeof axios>. And then use the mockedAxios to call the mockReturnValueOnce. With your code, should be done like this:

import myModuleThatCallsAxios from '../myModule';
import axios from 'axios';

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

it('Calls the GET method as expected', async () => {
  const expectedResult: string = 'result';

  mockedAxios.get.mockReturnValueOnce({ data: expectedResult });
  const result = await myModuleThatCallsAxios.makeGetRequest();

  expect(mockedAxios.get).toHaveBeenCalled();
  expect(result).toBe(expectedResult);
});

answered Nov 8, 2018 at 9:21

hutabalian

3,5343 gold badges18 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Safa Alai Over a year ago

I also tried this method with 'mockedAxios.get.getResolvedValueOnce' and got TypeError: mockedAxios.get.mockResolvedValueOnce is not a function

Safa Alai Over a year ago

I tried this method and I got Argument of type '{ data: string; }' is not assignable to parameter of type 'Promise<unknown>'. Also when I run it I get mockReturnedValue is not a function.

Aidan Grimshaw Over a year ago

I had to use const mockedFetch = fetch as any when using fetch

Peter Ehrlich Over a year ago

@SafaAlai > Note: In order to mock properly, Jest needs jest.mock('moduleName') to be in the same scope as the require/import statement. -> stackoverflow.com/questions/64844580/… ->

mikemaccana · Accepted Answer · 2021-11-02 16:27:51Z

74

Please use the mocked function from ts-jest

The mocked test helper provides typings on your mocked modules and even their deep methods, based on the typing of its source. It makes use of the latest TypeScript feature, so you even have argument types completion in the IDE (as opposed to jest.MockInstance).

import myModuleThatCallsAxios from '../myModule';
import axios from 'axios';
import { mocked } from 'ts-jest/utils'

jest.mock('axios');

// OPTION - 1
const mockedAxios = mocked(axios, true)
// your original `it` block
it('Calls the GET method as expected', async () => {
  const expectedResult: string = 'result';

  mockedAxios.mockReturnValueOnce({ data: expectedResult });
  const result = await myModuleThatCallsAxios.makeGetRequest();

  expect(mockedAxios.get).toHaveBeenCalled();
  expect(result).toBe(expectedResult);
});

// OPTION - 2
// wrap axios in mocked at the place you use
it('Calls the GET method as expected', async () => {
  const expectedResult: string = 'result';

  mocked(axios).get.mockReturnValueOnce({ data: expectedResult });
  const result = await myModuleThatCallsAxios.makeGetRequest();

  // notice how axios is wrapped in `mocked` call
  expect(mocked(axios).get).toHaveBeenCalled();
  expect(result).toBe(expectedResult);
});

I can't emphasise how great mocked is, no more type-casting ever.

edited Nov 2, 2021 at 16:27

mikemaccana

126k113 gold badges441 silver badges544 bronze badges

answered Oct 4, 2019 at 2:49

Ankeet Maini

7826 silver badges8 bronze badges

5 Comments

Ben Keil Over a year ago

I get only an error that TypeError: ts_jest_1.mocked(...).sendMessage.mockReturnValue is not a function

devakone Over a year ago

This is a no brainer if you're using jest-preset-angular as it comes with ts-jest as a dependency

Gabriel Vilches Alves Over a year ago

updated link to mocked docs: kulshekhar.github.io/ts-jest/docs/guides/test-helpers

Hexworks Over a year ago

This is not a solution. The solution below should be accepted.

Joel Over a year ago

mocked is now deprecated and will be removed in 28.0.0. The function has been integrated into jest-mock package as a part of Jest 27.4.0, see github.com/facebook/jest/pull/12089. Please use the one from jest-mock instead.

Brian Adams · Accepted Answer · 2018-07-29 19:04:56Z

42

+50

To idiomatically mock the function while maintaining type safety use spyOn in combination with mockReturnValueOnce:

import myModuleThatCallsAxios from '../myModule';
import axios from 'axios';

it('Calls the GET method as expected', async () => {
  const expectedResult: string = 'result';

  // set up mock for axios.get
  const mock = jest.spyOn(axios, 'get');
  mock.mockReturnValueOnce({ data: expectedResult });

  const result = await myModuleThatCallsAxios.makeGetRequest();

  expect(mock).toHaveBeenCalled();
  expect(result).toBe(expectedResult);

  // restore axios.get
  mock.mockRestore();
});

answered Jul 29, 2018 at 19:04

Brian Adams

46.2k12 gold badges123 silver badges115 bronze badges

3 Comments

Eduard Jacko Over a year ago

missing typescript implementation

Big Money Over a year ago

This expects a parameter of type void when you set the mockReturnValueOnce(...)

Safa Alai Over a year ago

I tried this method with mockReturnValueOnce and got: Argument of type '{ data: string; }' is not assignable to parameter of type 'Promise<unknown>'. However, the test runs and succeeds. Then I tried this with mockResolvedValueOnce( () => {data:'hello'} ) and both the compile error and runtime errors were solved.

Melchia · Accepted Answer · 2022-12-20 13:36:03Z

18

Starting with ts-jest 27.0 mocked from ts-jest will be deprecated and removed in 28.0 you can check it in the official documentation. So please use instead jest.mocked from jest. Here's the documentation

So for your example:

import myModuleThatCallsAxios from '../myModule';
import axios from 'axios';

jest.mock('axios');

// OPTION - 1
const mockedAxios = jest.mocked(axios, true)
// your original `it` block
it('Calls the GET method as expected', async () => {
  const expectedResult: string = 'result';

  mockedAxios.mockReturnValueOnce({ data: expectedResult });
  const result = await myModuleThatCallsAxios.makeGetRequest();

  expect(mockedAxios.get).toHaveBeenCalled();
  expect(result).toBe(expectedResult);
});

edited Dec 20, 2022 at 13:36

answered Mar 10, 2022 at 13:52

Melchia

24.5k23 gold badges110 silver badges130 bronze badges

Comments

Estus Flask · Accepted Answer · 2018-07-28 02:05:37Z

15

A usual approach to provide new functionality to imports to extend original module like declare module "axios" { ... }. It's not the best choice here because this should be done for entire module, while mocks may be available in one test and be unavailable in another.

In this case a type-safe approach is to assert types where needed:

  (axios.get as jest.Mock).mockReturnValueOnce({ data: expectedResult });
  ...
  expect(axios.get as jest.Mock).toHaveBeenCalled();

answered Jul 28, 2018 at 2:05

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

2 Comments

Dr.G Over a year ago

I got mockReturnValueOnce is not a function

Estus Flask Over a year ago

@Dr.G mockReturnValueOnce is a part of Jest API in all recent versions. This means that a function is not Jest spy

Ogglas · Accepted Answer · 2020-09-25 09:41:37Z

@hutabalian The code works really well when you use axios.get or axios.post but if you use a config for requests the following code:

const expectedResult: string = 'result';
const mockedAxios = axios as jest.Mocked<typeof axios>;
mockedAxios.mockReturnValueOnce({ data: expectedResult });

Will result in this error:

TS2339 (TS) Property 'mockReturnValueOnce' does not exist on type 'Mocked'.

You can solve it like this instead:

AxiosRequest.test.tsx

import axios from 'axios';
import { MediaByIdentifier } from '../api/mediaController';

jest.mock('axios', () => jest.fn());

test('Test AxiosRequest',async () => {
    const mRes = { status: 200, data: 'fake data' };
    (axios as unknown as jest.Mock).mockResolvedValueOnce(mRes);
    const mock = await MediaByIdentifier('Test');
    expect(mock).toEqual(mRes);
    expect(axios).toHaveBeenCalledTimes(1);
});

mediaController.ts:

import { sendRequest } from './request'
import { AxiosPromise } from 'axios'
import { MediaDto } from './../model/typegen/mediaDto';

const path = '/api/media/'

export const MediaByIdentifier = (identifier: string): AxiosPromise<MediaDto> => {
    return sendRequest(path + 'MediaByIdentifier?identifier=' + identifier, 'get');
}

request.ts:

import axios, { AxiosPromise, AxiosRequestConfig, Method } from 'axios';

const getConfig = (url: string, method: Method, params?: any, data?: any) => {
     const config: AxiosRequestConfig = {
         url: url,
         method: method,
         responseType: 'json',
         params: params,
         data: data,
         headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json' },
    }
    return config;
}

export const sendRequest = (url: string, method: Method, params?: any, data?: any): AxiosPromise<any> => {
    return axios(getConfig(url, method, params, data))
}

Ridd · Accepted Answer · 2021-05-24 09:19:21Z

0

After updating to the newest Axios (0.21.1) I started to have this kind of problem. I tried a lot of solutions but with no result.

My workaround:

type axiosTestResponse = (T: unknown) => Promise<typeof T>;

...

it('some example', async () => {
  const axiosObject = {
    data: { items: [] },
    status: 200,
    statusText: 'ok',
    headers: '',
    config: {},
  } as AxiosResponse;

  (Axios.get as axiosTestResponse) = () => Promise.resolve(axiosObject);
});

answered May 24, 2021 at 9:19

Ridd

12k3 gold badges21 silver badges20 bronze badges

Collectives™ on Stack Overflow

Typescript and Jest: Avoiding type errors on mocked functions

7 Answers 7

4 Comments

5 Comments

3 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

5 Comments

3 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related