jest-webpack-alias

Preprocessor for Jest that is able to resolve require() statements using webpack aliases.

⚠️

Consider using babel-plugin-module-resolver for new projects instead of jest-webpack-alias. An example setup can be seen at the Next.js repo.

Install

npm install --save-dev jest-webpack-alias

Setup

File __tests__/preprocessor.js:

var babelJest = require('babel-jest');
require('babel-register'); // support ES6 'import' statements
var webpackAlias = require('jest-webpack-alias');
 
module.exports = {
  process: function(src, filename) {
    if (filename.indexOf('node_modules') === -1) {
      src = babelJest.process(src, filename);
      src = webpackAlias.process(src, filename);
    }
    return src;
  }
};

File package.json:

{
  ...
  "jest": {
    ...
    "scriptPreprocessor": "<rootDir>/__tests__/preprocessor.js",
  },
  "jest-webpack-alias": {
    "profile": "dev"
  }
}

Common problems

Importing CSS and SCSS files

In order to use statements like require('some-styles.css') in a testing environment, it's best to use an npm module like ignore-styles to ignore files that match certain file extensions in require() statements.

Manual package resolution

Code like this will not work, because an AST parser is not smart enough to evaluate variables into strings.

var moduleName = 'myModName';
var computed = require(moduleName);

It can be rewritten like this, using the resolve function:

var resolve = require('jest-webpack-alias').resolve;
var moduleName = 'myModName';
var computed = require(resolve(moduleName, __filename));

Non-javascript package resolution.

Code like this will fail, because it is resolved by webpack loader.

File: main.js

require('./style.css');
...

File: __tests__/main.js

jest.dontMock('../main.js');
require('../main.js');
...

The workaround for this is to use Manual Mocks.

Example

Project structure:

--+ /            
    +- src /            
    |      +- main.js
    |      +- style.css
    |      +- __tests__ / main.js
    |      +- __mocks__ / style.css
    +- __tests__ /
    |            +- preprocessor.js
    +- node_modules /
    +- package.json
    +- webpack.config.js
    

File: src/main.js

...
require('style.css');
...

File: src/__tests__/main.js (__tests__ can actually be anywhere, not only next to tested files)

jest.dontMock('../main');
var main = require('../main');
...

File: src/__mocks__/style.css (__mocks__ must be next to mocked files)

module.exports = 'src/style.css';

package.json options

• jest-webpack-alias.configFile: Optional, default is "webpack.config.js". If provided, this should be a path fragment relative to your package.json file. Example: "webpack/config.dev.js".

• jest-webpack-alias.profile: Optional. If provided, will expect your webpack config to be an array of profiles, and will match against the name field of each to choose a webpack config that applies to your Jest tests. See https://github.com/webpack/webpack/tree/master/examples/multi-compiler for an example of this kind of setup.

Known issues

• resolve.modulesDirectories only searches the directory containing your package.json file, not all ancestors of current file

License

MIT