'How to add module aliases to Jest testing in Next.js?

Currently I am using automatic imports in my Next.js project, configured by jsconfig.json in the root directory:

{
  "typeAcquisition": {
    "include": ["jest"]
  },
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/functions/*": ["functions/*"],
      "@/styles/*": ["styles/*"],
      "@/pages/*": ["pages/*"]
    }
  },
  "exclude": ["node_modules"]
}

When I add jest testing in a test directory at the root, the tests are not pointing towards the root directory. I have tried:

adding a jest.config.js file that points to the root directory
appending typeAcquisition to the jsconfig.js
adding a jsconfig.js to the tests directory.

I am not sure which is the right path, or how to properly set this up, but none of these seem to work for me. I can get the tests to run by removing the imports altogether and instead just ../../-ing my way through the directory, but this requires me to change all the nested files as well - i.e.: In pages/api/budget, I call a handler to go to functions/api/fetchBudget. In order for the Jest testing to reach it, I have to change the import statements on both of these to use the standard ../../ syntax, instead of @pages/.. or @functions that I have set up.

TL;DR: How do I set up Jest testing to go through my project's root directory jsconfig.json; or, in lieu of that, how can I set up Jest testing with it's own jsconfig.json?

Solution 1:^[1]

I would recommend adding ts-jest in your project (npm i -D ts-jest) . After that, the pathsToModuleNameMapper function should be implemented to inject your paths from tsconfig into your jest.config settings:

// jest.config.js
const nextJest = require("next/jest");
const { pathsToModuleNameMapper } = require("ts-jest");
const { compilerOptions } = require("./tsconfig");

const createJestConfig = nextJest({  
  dir: "./",
});

const customJestConfig = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  modulePaths: ["<rootDir>/src"],
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
  testEnvironment: "jest-environment-jsdom",
};

module.exports = createJestConfig(customJestConfig);

Solution 2:^[2]

You have to configure Jest to resolve the imports to match the paths you have in the jsconfig.json file. This is done through the moduleNameMapper property in your jest.config.js file.

// jest.config.js

module.exports = {
    moduleNameMapper: {
        '^@/components/(.*)$': '<rootDir>/components/$1',
        '^@/functions/(.*)$': '<rootDir>/functions/$1',
        '^@/styles/(.*)$': '<rootDir>/styles/$1',
        '^@/pages/(.*)$': '<rootDir>/pages/$1'
    },
    // Other configs
}

For more details check out the Next.js Testing docs.

Solution 3:^[3]

The problem was that I wanted to automatically add the same nickname as defined in tsconfig.json, not to add again in jest config.

I added "@components/(.*)": "<rootDir>/src/components/$1", to jest.config.js and its worked, but it's not right solution,

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Maont Dev
Solution 2	juliomalves
Solution 3	Koorosh Torabi

'How to add module aliases to Jest testing in Next.js?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]