Jest transformer to work with webpack's require.context

jest.config.js

module.exports = {
  verbose: true,
  moduleDirectories: ['node_modules'],
  transform: {
    '\\.js$': '<rootDir>/../build/utils/webpack_polyfill'
  }
}

require_context_transform.js

module.exports = {
  process (src, filename) {
    
    // Return original document if don't have reference to require.context.
    if (!/require\.context\(.*\)/gm.test(src)) {
      return src
    }

    return `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[\`./\${file}\`] = true
            })
        }
    
        readDirectory(path.resolve(__dirname, base))
    
        function Module (file) {
            return require(path.resolve(__dirname, base, file))
        }
    
        Module.keys = () => Object.keys(files)
    
        return Module
        }
    }
    ${src}`
  }
}

where did you configure to use require_context_transform.js?

@sincerekamal I think that was supposed to be named webpack_polyfill.js.

Note that due to the default value of /\.js$/ of the regularExpression param, this polyfill only matches javascript file types by default.

If you want to change this default, you should modify line 12.

Webpack's default is /^\.\/.*$/¹

Footnotes

1. https://webpack.js.org/guides/dependency-management/#requirecontext ↩