Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 308
borges Avatar asked Jul 12 '16 14:07

borges


People also ask

What is require context?

require. context is a special feature supported by webpack's compiler that allows you to get all matching modules starting from some base directory.

Does jest need Webpack?

Jest can be used in projects that use webpack to manage assets, styles, and compilation.


1 Answers

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).

like image 130
Edmundo Rodrigues Avatar answered Sep 18 '22 12:09

Edmundo Rodrigues