Testing with Jest and Webpack aliases

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'),};

Since I had the same problem before I read again, and this time more carefully the documentation. Correct config should be:

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

Using: "jest": "^26.5.3", and "webpack": "4.41.5",I was able to properly match my webpack/typescript aliases in the jest.config.js with this pattern:

Webpack config:

module.exports = {   // the rest of your config    resolve: {      alias: {        'components': path.resolve(__dirname, 'js/app/components'),        'modules': path.resolve(__dirname, 'js/app/modules'),        'types': path.resolve(__dirname, 'js/types'),        'hooks': path.resolve(__dirname, 'js/app/hooks'),        'reducers': path.resolve(__dirname, 'js/app/reducers'),        '__test-utils__': path.resolve(__dirname, 'js/app/__test-utils__')       }    },}

Jest.config.js:

  moduleNameMapper: {    '^types/(.*)$':  '<rootDir>/js/types/$1',    '^components/(.*)$': '<rootDir>/js/app/components/$1',    '^modules/(.*)$':  '<rootDir>/js/app/modules/$1',    '^hooks/(.*)$':  '<rootDir>/js/app/hooks/$1',    '^reducers/(.*)$':  '<rootDir>/js/app/reducers/$1',    '^__test-utils__/(.)$': '<rootDir>/js/app/__test-utils__/$1'   }

Here's an explanation of the symbols:

• (.*)$: capture whatever comes after the exact match (the directory)
• $1: map it to this value in the directory I specify.

and tsconfig.json:

    "paths": {      "config": ["config/dev", "config/production"],      "components/*": ["js/app/components/*"],      "modules/*": ["js/app/modules/*"],      "types/*": ["js/types/*"],      "hooks/*": ["js/app/hooks/*"],      "reducers/*": ["js/app/reducers/*"],      "__test-utils__/*": ["js/app/__test-utils__/*"]    }