Testing with Jest and Webpack aliases

Question

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.

Je

Answer 1

None of the prescribed answers worked for me.

Was able to solve with the following pattern:

Jest version 25+

moduleNameMapper: {
    '^Screens(.*)': '<rootDir>/src/screens/$1',
    '^Components(.*)': '<rootDir>/src/components/$1',
    '^Assets(.*)': '<rootDir>/src/assets/$1',
    '^Services/(.*)': '<rootDir>/src/services/$1',
  },

Answer 2

FWIW, Try switching the alias order, keep the more specific up and less specific down, e.g.

"moduleNameMapper": {
  "^@components$": "<rootDir>/shared/components/",
  "^@shared$": "<rootDir>/shared/"
}

Answer 3

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"
    }
  },

Answer 4

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__/*"]
    }

Answer 5

This is a real insanity but when I try to map module in package.json like this:

"jest": {
  "moduleNameMapper": {
    '@root/(.*)': '<rootDir>/../$1'
  }
}

It doesn't work.

But when I do the same in jest.config.js it works:

module.exports = {
   moduleNameMapper: {
     '@root/(.*)': '<rootDir>/../$1'
   }
}

Answer 6

this solution works well for me:

moduleNameMapper: {
    '^Screens(.*)': '<rootDir>/src/screens/$1',
    '^Components(.*)': '<rootDir>/src/components/$1',
    '^Assets(.*)': '<rootDir>/src/assets/$1',
    '^Services/(.*)': '<rootDir>/src/services/$1',
  },