67

I have seen questions referring to the mocking of default exports with jest around here, but I don't think this has already been asked:

When mocking the default export of a dependency of a module that is being tested, the tests suite fails to run if the module imports the dependency with the ES6 import statement, stating TypeError: (0 , _dependency.default) is not a function It succeeds, however, if the module uses a require().default call instead.

In my understanding, import module from location directly translates to const module = require(location).default, so I am very confused why this is happening. I'd rather keep my code style consistent and not use the require call in the original module.

Is there a way to do it?

Test file with mock:

import './modules.js';
import dependency from './dependency';

jest.mock('./dependency', () => {
   return {
      default: jest.fn()
   };
});

// This is what I would eventually like to call
it('calls the mocked function', () => {
   expect(dependency).toHaveBeenCalled();
});

Dependency.js

export default () => console.log('do something');

module.js (not working)

import dependency from './dependency.js';
dependency();

module.js (working)

const dependency = require('./dependency.js').default;
dependency();
3
  • Is the dependency call happening on a different module from the jest.mock call?
    – MinusFour
    Nov 1, 2017 at 14:24
  • shouldnt jest.mock('./dependecy', () => jest.fn()); work in both cases? Nov 1, 2017 at 15:58
  • 1
    I updated the code of the test file to show that the module is being tested by simply importing and running it. Nov 1, 2017 at 22:22

4 Answers 4

58

the short answer for ES module if you want to use import dependency from 'dependency'

jest.mock('dependency', () => ({
  ...jest.requireActual('dependency'),
  __esModule: true,
  default: jest.fn(),
}))
4
  • While the accepted answer gives good details on what's going on and why this happens I find this to actually be a cleaner solution. Not sure why it got downvoted, but in a scenario like mine where the codebase is not fully migrated to ES6/ Typescript for imports setting the __esModule option to false did the trick, it allows the use of imports in the modules that use es6 and not have to mix require js within the newer files. Feb 6, 2022 at 18:14
  • If you want to have both a default as well as other exports, you can do it this way. __esModule: true is what's required to handle the default correctly.
    – Ryan H.
    Feb 17, 2022 at 13:11
  • It works also if you want to mock some not default imports with default import, the return alternative allows mocking only default value for example: import Component, {ComponentProps} from './component'
    – Seyhak Ly
    Jun 20, 2022 at 7:15
  • in my case I've used: jest.mock('@utils/metrics/useYMABFlags', () => { return { __esModule: true, default: jest.fn(() => { return { flags: {}, isLoading: false, }; }), }; });
    – Morani
    Nov 16, 2023 at 7:44
56

You can use either es6 import or require js to import your js files in your jest tests.

When using es6 import you should know that jest is trying to resolve all the dependencies and also calls the constructor for the class that you are importing. During this step, you cannot mock it. The dependency has to be successfully resolved, and then you can proceed with mocks.

I should also add that as can be seen here jest by default hoists any jest.mocks to the top of the file so the order in which you place your imports does not really matter.

Your problem though is different. Your mock function assumes that you have included your js file using require js.

jest.mock('./dependecy', () => {
   return {
      default: jest.fn()
   };
});

When you import a file using require js, this is the structure it has:

enter image description here

So assuming I have imported my class called "Test" using require js, and it has method called "doSomething" I could call it in my test by doing something like:

const test = require('../Test');
test.default.doSomething();

When importing it using es6 import, you should do it differently though. Using the same example:

import Test from '../Test';
Test.doSomething();

EDIT: If you want to use es6 import change your mock function to:

jest.mock('./dependecy', () => jest.fn());
8
  • The module I am testing is not exporting a class or anything at all. I updated the code to show what that. It is importing / requiring a module that dos have a default export, however. Nov 1, 2017 at 22:23
  • So my module should import the dependency es6 style. If the mock expects require js, how can I make it expect es6 import? Nov 1, 2017 at 22:25
  • @AnnaMelzer I've edited my answer with how your mock function should be. Nov 2, 2017 at 7:32
  • I just curios, but what is _esModule: true, how can I print the structure of an imported file? (not the returned object from the required file) Nov 13, 2020 at 15:04
  • @KevinChandra __esModule lets importing modules know that this is a transpiled ES module (which matters especially for default exports). Nov 13, 2020 at 16:24
21

Have you tried something like this? I was dealing with the default export mocking for months until I found this.

jest.mock('./dependency', () => () => jest.fn());

The idea behind this line is that you are exporting a module that is a function. So you need to let Jest knows that it has to mock all your ./dependency file as a function, that returns a jest.fn()

0
8

I had to do this in vue and jest:

Even though in the code I had used the default import, in the unit test I had to name the import like this:

import * as someName from 'dependency';

and then i used the strange property '__esModule' to allow jest to work with default constructor like this:

jest.mock('dependency', () => ({
  __esModule: true,
  default: jest.fn(),
}));

And finally in my unit test, i used spy on default constructor with an implementation:

const mySpy = jest.spyOn(someName, 'default').mockImplementation(params => {
 params.doSomeThing();
});
...
expect(mySpy).toBeCalledWith({...})

It worked, and it was the only way it worked

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.