how to change jest mock function return value in each test?

Question

I have a mock module like this in my component test file

  jest.mock('../../../magic/index', () => ({
    navigationEnabled: () => true,
    guidanceEnabled: () => true
  }));

these functions will be called in render function of my component to hide and show some specific feature.

I want to take a snapshot on different combinations of the return value of those mock functions.

for suppose I have a test case like this

 it('RowListItem should not render navigation and guidance options', () => {
    const wrapper = shallow(
      <RowListItem type="regularList" {...props} />
    );
    expect(enzymeToJson(wrapper)).toMatchSnapshot();
  });

to run this test case I want to change the mock module functions return values to false like this dynamically

jest.mock('../../../magic/index', () => ({
    navigationEnabled: () => false,
    guidanceEnabled: () => false
  }));

because i am importing RowListItem component already once so my mock module wont re import again. so it wont change. how can i solve this ?

Andreas Köberle · Accepted Answer · 2017-08-18T14:50:15.643

212

You can mock the module so it returns spies and import it into your test:

import {navigationEnabled, guidanceEnabled} from '../../../magic/index'

jest.mock('../../../magic/index', () => ({
    navigationEnabled: jest.fn(),
    guidanceEnabled: jest.fn()
}));

Then later on you can change the actual implementation using mockImplementation

navigationEnabled.mockImplementation(()=> true)
//or
navigationEnabled.mockReturnValueOnce(true);

and in the next test

navigationEnabled.mockImplementation(()=> false)
//or
navigationEnabled.mockReturnValueOnce(false);

edited Aug 18 '17 at 14:50

answered Aug 18 '17 at 14:10

Andreas Köberle

106,652
57
273
297

6

Maybe it was not the case at the time, but `jest.mock` needs to be called before doing the import. – Sylvain B Dec 04 '19 at 11:27
7

@Sylvain Nothing can/will be called before ES6 imports, they're statically enforced to being first. – oskarth Feb 11 '20 at 09:02
3

@OlaoyeOluwapelumi You can type it before all you want, but it won't get executed until after the ES6 imports, because they're statically enforced to being treated as first. – oskarth May 25 '20 at 11:16
7

Relevant citation: "But often you need to instruct Jest to use a mock before modules use it. For this reason, Jest will automatically hoist jest.mock calls to the top of the module (before any imports)." From: https://jestjs.io/docs/en/manual-mocks – Pierre Henry Oct 07 '20 at 23:43
3

Here's a tutorial that outlines this technique in depth - https://mikeborozdin.com/post/changing-jest-mocks-between-tests/ – Mike Borozdin Feb 20 '21 at 13:00
Just as a heads up. Do this and then render your component – oskrgg Apr 12 '23 at 02:02

score 55 · Answer 2 · edited Oct 15 '18 at 23:09

55

what you want to do is

import { navigationEnabled, guidanceEnabled } from '../../../magic/index';   

jest.mock('../../../magic/index', () => ({
  navigationEnabled: jest.fn(),
  guidanceEnabled: jest.fn()
}));

describe('test suite', () => {
  it('every test', () => {
    navigationEnabled.mockReturnValueOnce(value);
    guidanceEnabled.mockReturnValueOnce(value);
  });
});

you can look more about these functions here =>https://facebook.github.io/jest/docs/mock-functions.html#mock-return-values

edited Oct 15 '18 at 23:09

ThinkBonobo

15,487
9
65
80

answered Aug 18 '17 at 14:11

Dayan Moreno Leon

5,357
2
22
24

18

this does not work with typescript, you will get: Property 'mockReturnValueOnce' does not exist on type '() => string'. – tommybernaciak Jan 30 '20 at 15:50
41

for TS you need to do `(mockedFn as jest.Mock). mockReturnValueOnce` – Dayan Moreno Leon Jan 30 '20 at 16:47
6

If using `ts-jest`, the `mocked(mockedFn)` wrapper is syntactical sugar for the same thing. https://github.com/kulshekhar/ts-jest/blob/master/docs/user/test-helpers.md#mocked – Brent Sharrow Apr 06 '20 at 21:32
1

really helpful to typescript developers, thank you!! – 高欣平 Jun 03 '22 at 14:31
This won't work if you have more than 1 call of mocked function in the tested component. – Mikhail Batcer Aug 21 '23 at 15:18

score 12 · Answer 3 · answered Sep 11 '18 at 15:39

I had a hard time getting the accepted answers to work - my equivalents of navigationEnabled and guidanceEnabled were undefined when I tried to call mockReturnValueOnce on them.

Here's what I had to do:

In ../../../magic/__mocks__/index.js:

export const navigationEnabled = jest.fn();
export const guidanceEnabled = jest.fn();

in my index.test.js file:

jest.mock('../../../magic/index');
import { navigationEnabled, guidanceEnabled } from '../../../magic/index';
import { functionThatReturnsValueOfNavigationEnabled } from 'moduleToTest';

it('is able to mock', () => {
  navigationEnabled.mockReturnValueOnce(true);
  guidanceEnabled.mockReturnValueOnce(true);
  expect(functionThatReturnsValueOfNavigationEnabled()).toBe(true);
});

how to change jest mock function return value in each test?

3 Answers3

Linked