Babel Module Resolver with Jest

Here you will learn how to use Jest with Babel Module Resolver for aliases that are defined in your .babelrc file:

javascript

{
  ...
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "@components": "./src/components",
          "@constants": "./src/constants",
        }
      }
    ],
  ]
}

In order to get the same alias mappings to Jest, the jest.config.js file needs to look like this:

javascript

module.exports = {
  roots: ['<rootDir>'],
  moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],
  testPathIgnorePatterns: ['./node_modules/'],
  moduleNameMapper: {
    '^@components(.*)$': '<rootDir>/src/components$1',
    '^@constants(.*)$': '<rootDir>/src/constants$1',
  },
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
  },
};

Now you can use import statemes with aliases in your Jest testing environment too.

Babel Module Resolver with Jest

Never Miss an Article

The Road to Next