Nocturnal Pajama Mutants

    jest-webpack-alias

    3.3.4 • Public • Published

    jest-webpack-alias

    Build Status Coverage Status NPM

    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

    Install

    npm i jest-webpack-alias

    DownloadsWeekly Downloads

    1,338

    Version

    3.3.4

    License

    MIT

    Unpacked Size

    13.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • mwolson