How to Mock ES6 Imports in Jest: A Comprehensive Guide

How to Mock ES6 Imports with Jest

Introduction

When testing ES6 modules, you may need to mock the behavior of imported dependencies. While Jasmine offers a straightforward approach, Jest requires a slightly different solution.

Named Export Mocking

To mock a named export, you can utilize a hack involving import *. Consider the following module:

<code class="js">// dependency.js
export const doSomething = (y) => console.log(y);</code>

In your production module:

<code class="js">// myModule.js
import { doSomething } from './dependency';

export default (x) => {
  doSomething(x * 2);
};</code>

And in your test:

<code class="js">import myModule from '../myModule';
import * as dependency from '../dependency';

describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    dependency.doSomething = jest.fn(); // Mutate the named export

    myModule(2);

    expect(dependency.doSomething).toBeCalledWith(4);
  });
});</code>

Default Export Mocking

The same hack works for default exports:

<code class="js">// dependency.js
export default (y) => console.log(y);</code>

<code class="js">// myModule.js
import dependency from './dependency'; // Note the lack of curlies

export default (x) => {
  dependency(x * 2);
};</code>

<code class="js">import myModule from '../myModule';
import * as dependency from '../dependency';

describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    dependency.default = jest.fn(); // Mutate the default export

    myModule(2);

    expect(dependency.default).toBeCalledWith(4); // Assert against the default
  });
});</code>

Cautionary Note

While this hacking approach works, it is not recommended as it can lead to side effects and unpredictable behavior in tests, especially if tests are executed out of order. For more robust and reliable mocking, consider using jest.spyOn or jest.mock as suggested in other answers or in the updated documentation.

The above is the detailed content of How to Mock ES6 Imports in Jest: A Comprehensive Guide. For more information, please follow other related articles on the PHP Chinese website!