Configuring Jest to mimic webpack resolve root and resolve alias

Question

I am working on setting up a project with Webpack & Jest. At the moment Webpack resolve configurations cause complications with Jest tests. In my webpack config I have the following options set:

  resolve: {
    root: [__dirname + "/src/" ],
    extensions: ['', '.js', '.coffee', '.jsx', '.css', '.scss', '.svg']
  }

This lets me require assets and modules with:

import UnknownImg from 'assets/unknown';

The above actually lives (relative to my project root) src/assets/unknown.svg.

However, when I run the test for files with lines like the above I get errors when resolving the path to that required module/asset.

Error: /Users/byronsm/dev/nerve-center/src/components/organisms/system_status.jsx: Cannot find module 'assets/unknown' from '/Users/byronsm/dev/nerve-center/src/components/organisms'

In this case it appears to be doing a relative lookup of the imported module path. Is there a way for me to get Jest to behave the same as Webpack?

Answer 1

A solution is now provided in the official jest docs. See Webpack Tutorial.

In short, add the modulePaths option to your jest config inpackage.json:

"jest": {
    "modulePaths": ["src"], 
    ...
}

Answer 2

You can use Jest 20+ resolver option and plug it with jest-webpack-resolver

This package does not seem mature (several days old) but does the job for me. Also, as of now, it requires Jest config to be in a separate jest.config.js file or provided via CLI (does not support package.json).