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

user_13801896 0
Viewed 1453

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?

jestjs next.js javascript
3 Answers

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.

user_18707800

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);
user_190437980

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,

user_141635000
Related