Mocking relative dependencies in Jest with jest.mock()

If you're like me and have just entered the world of Jest for testing your React application. You might be familiar with a mocking library called Proxyquire.

Proxyquire - "nodejs require in order to allow overriding dependencies during testing."

An example of using proxyquire to mock an import would be something like this.

/* Source File - src/doSomething.js */
import dependencyOne from "../utils/dependencyOne";

export default () => dependencyOne();

/* Test File - test/doSomething.spec.js */
import proxyquire from "proxyquire";

const doSomething = proxyquire("../src/doSomething", {
  "../utils/dependencyOne": (cb) => cb(),
});

doSomething(); //calls our mocked dependencyOne instead of the real one

You can see here that when we mock dependencyOne, we use the same exact path that the source file uses to import the relative dependency.

In Jest however, this same functionality is delivered with a slight change in usage.

Lets take the above example now in Jest's syntax.

/* Source File - src/doSomething.js */
import dependencyOne from "../utils/dependencyOne";

export default () => dependencyOne();

/* Test File - test/doSomething.spec.js */
import doSomething from "../src/doSomething";

jest.mock("../src/utils/dependencyOne", (cb) => cb());

doSomething(); //calls our mocked dependencyOne instead of the real one

You can see that we use the path relative to the test file this time to mock the dependency. The mock gets hoisted so it's evaluated before the import statement so this allows us to have the same functionality and control the dependencies of the file we're trying to test.

This isn't well documented so I thought I'd write this down to save someone else the headache I had trying to figure this out.