javascriptreactjswebpackjestjswebpack-2

Testing with Jest and Webpack aliases


I am looking to be able to use webpack aliases to resolve imports when using jest, and optimally, reference the webpack.aliases to avoid duplication.

Jest conf:

  "jest": {
    "modulePaths": ["src"],
    "moduleDirectories": ["node_modules"],
    "moduleNameMapper": {
      "^@shared$": "<rootDir>/shared/",
      "^@components$": "<rootDir>/shared/components/"
    }
  },

Webpack aliases:

exports.aliases = {
    '@shared': path.resolve(paths.APP_DIR, 'shared'),
    '@components': path.resolve(paths.APP_DIR, 'shared/components'),
};

Imports:

import Ordinal from '@shared/utils/Ordinal.jsx';
import Avatar from '@components/common/Avatar.jsx';

For some reason the @ causes issues, so when removed (in both alias and import), it can find shared but components still cannot be resolved.

 FAIL  src/shared/components/test/Test.spec.jsx
  ● Test suite failed to run

    Cannot find module '@shared/utils/Ordinal.jsx' from 'Test.jsx'

I have tried using jest-webpack-alias, babel-plugin-module-resolver and the Jest/Webpack docs


Solution

  • This seems to have been fixed.

    Below is a working setup:

    Versions

    "jest": "~20.0.4"

    "webpack": "^3.5.6"

    package.json

    "jest": {
      "moduleNameMapper": {
        "^@root(.*)$": "<rootDir>/src$1",
        "^@components(.*)$": "<rootDir>/src/components$1",
      } 
    }
    

    webpack.shared.js

    const paths = {
      APP_DIR: path.resolve(__dirname, '..', 'src'),
    };
    
    exports.resolveRoot = [paths.APP_DIR, 'node_modules'];
    
    exports.aliases = {
      '@root': path.resolve(paths.APP_DIR, ''),
      '@components': path.resolve(paths.APP_DIR, 'components'),
    };