Dashdashforce

Mocking named exports in Jest unit tests

Cover Image for Mocking named exports in Jest unit tests

Apparently it takes forgetting and remembering how to do something about 3 times before I finally decide to take the time to write something down. I should work on that. This time around it was remembering how to mock out a named export function in Javascript for unit testing a React component. I rather love good unit testing so this was a problem that needed solving…again.

The problem

Let’s say you have a JS file with some functions in them like this that are used in another file that you are unit testing.

export function dataCleaner(data) {
    ...more code here
};

In my case dataCleaner() was a function being used in a React component that was doing some seriously hairy transformation work that I didn’t want to test or even execute in a unit test so I wanted to mock it out. The mocks would allow for easy testing of the component and how it handled the different mocked returned data from dataCleaner().

The solution

In order to mock dataCleaner() in a Jest test I found I was able to do the following inside the main block of one of my Jest tests.

import * as dataUtilFunctions from 'path/to/data/utils/functions.js';

test(`Given the table is rendered, verify it loads some mocked data.`, () => {
    dataUtilFunctions.dataCleaner = jest.fn();
    dataUtilFunctions.dataCleaner.mockImplementation(() => {
        return {}
    });

    ....rest of the unit test here
});

So in this case I’m mocking dataCleaner to return an empty object. This can also be done at a higher level at the top of the test file itself or even in a setup file for jest so that every single test will have that mock by default. In my case I only needed it for two tests so I did it this way in both with different return values.

I also found in my searching that there is a newer alternative syntax to do this which I found via this Stack Overflow question. That newer way of mocking seems especially good with rather large files with a lot of named exports and I was able to make it work in my case too.

Happy mocking!