How can I mock Webpack's require.context in Jest?

Suppose I have the following module:

var modulesReq = require.context('.', false, /\.js$/);
modulesReq.keys().forEach(function(module) {
  modulesReq(module);
});

Jest complains because it doesn't know about require.context:

 FAIL  /foo/bar.spec.js (0s)
● Runtime Error
  - TypeError: require.context is not a function

How can I mock it? I tried using setupTestFrameworkScriptFile Jest configuration but the tests can't see any changes that I've made in require.

Solution 1:

I had the same problem, then I've made a 'solution'.

I'm pretty sure that this is not the best choice. I ended up stopping using it, by the points answered here:

https://github.com/facebookincubator/create-react-app/issues/517 https://github.com/facebook/jest/issues/2298

But if you really need it, you should include the polyfill below in every file that you call it (not on the tests file itself, because the require will be no global overridden in a Node environment).

// This condition actually should detect if it's an Node environment
if (typeof require.context === 'undefined') {
  const fs = require('fs');
  const path = require('path');

  require.context = (base = '.', scanSubDirectories = false, regularExpression = /\.js$/) => {
    const files = {};

    function readDirectory(directory) {
      fs.readdirSync(directory).forEach((file) => {
        const fullPath = path.resolve(directory, file);

        if (fs.statSync(fullPath).isDirectory()) {
          if (scanSubDirectories) readDirectory(fullPath);

          return;
        }

        if (!regularExpression.test(fullPath)) return;

        files[fullPath] = true;
      });
    }

    readDirectory(path.resolve(__dirname, base));

    function Module(file) {
      return require(file);
    }

    Module.keys = () => Object.keys(files);

    return Module;
  };
}

With this function, you don't need to change any require.context call, it will execute with the same behavior as it would (if it's on webpack it will just use the original implementation, and if it's inside Jest execution, with the polyfill function).

Solution 2:

After spending some hours trying each of the answers above. I would like to contribute.

Adding babel-plugin-transform-require-context plugin to .babelrc for test env fixed all the issues.

Install - babel-plugin-transform-require-context here https://www.npmjs.com/package/babel-plugin-transform-require-context (available with yarn too)

Now add plugin to .babelrc

{
  "env": {
    "test": {
      "plugins": ["transform-require-context"]
    }
  }
}

It will simply transform require-context for test env into dummy fn calls so that code can run safely.

Solution 3:

If you are using Babel, look at babel-plugin-require-context-hook. Configuration instructions for Storybook are available at Storyshots | Configure Jest to work with Webpack's require.context(), but they are not Storyshots/Storybook specific.

To summarise:

Install the plugin.

yarn add babel-plugin-require-context-hook --dev

Create a file .jest/register-context.js with the following contents:

import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
registerRequireContextHook();

Configure Jest (the file depends on where you are storing your Jest configuration, e.g. package.json):

setupFiles: ['<rootDir>/.jest/register-context.js']

Add the plugin to .babelrc

{
  "presets": ["..."],
  "plugins": ["..."],
  "env": {
    "test": {
      "plugins": ["require-context-hook"]
    }
  }
}

Alternatively, add it to babel.config.js:

module.exports = function(api) {
  api.cache(true)

  const presets = [...]
  const plugins = [...]

  if (process.env.NODE_ENV === "test") {    
    plugins.push("require-context-hook")    
  }

  return {
    presets,
    plugins
  }
}

It may be worth noting that using babel.config.js rather than .babelrc may cause issues. For example, I found that when I defined the require-context-hook plugin in babel.config.js:

Jest 22 didn't pick it up;
Jest 23 picked it up; but
jest --coverage didn't pick it up (perhaps Istanbul isn't up to speed with Babel 7?).

In all cases, a .babelrc configuration was fine.

Remarks on Edmundo Rodrigues's answer

This babel-plugin-require-context-hook plugin uses code that is similar to Edmundo Rodrigues's answer here. Props to Edmundo! Because the plugin is implemented as a Babel plugin, it avoids static analysis issues. e.g. With Edmundo's solution, Webpack warns:

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Despite the warnings, Edmundo's solution is the most robust because it doesn't depend on Babel.

Solution 4:

Extract the call to a separate module:

// src/js/lib/bundle-loader.js
/* istanbul ignore next */
module.exports = require.context('bundle-loader?lazy!../components/', false, /.*\.vue$/)

Use the new module in the module where you extracted it from:

// src/js/lib/loader.js
const loadModule = require('lib/bundle-loader')

Create a mock for the newly created bundle-loader module:

// test/unit/specs/__mocks__/lib/bundle-loader.js
export default () => () => 'foobar'

Use the mock in your test:

// test/unit/specs/lib/loader.spec.js
jest.mock('lib/bundle-loader')
import Loader from 'lib/loader'

describe('lib/loader', () => {
  describe('Loader', () => {
    it('should load', () => {
      const loader = new Loader('[data-module]')
      expect(loader).toBeInstanceOf(Loader)
    })
  })
})

Solution 5:

Installing

babel-plugin-transform-require-context

package and adding the plugin in the .babelrc resolved the issue for me. Refer to the documentation here: https://www.npmjs.com/package/babel-plugin-transform-require-context