javascript - How to add module aliases to Jest testing in Next.js? - Stack Overflow

admin管理员组

文章数量:1220458

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?

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?

• javascript
• jestjs
• next.js

Share Improve this question Follow edited Dec 21, 2021 at 19:11 juliomalves 50.3k2323 gold badges177177 silver badges168168 bronze badges asked Dec 21, 2021 at 3:23 J.R.J.R. 12122 silver badges44 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 8

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.

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

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,

As the answers above mentioned, adding the following does indeed fix the Cannot find module issues:

"moduleNameMapper": {
  "^@/(.*)$": "<rootDir>/src/$1"
}

But what tripped me up was that adding the property to a new jest.config.js file didn't work as the project already had the jest config written in the package.json under the jest property:

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

This package.json config was being used instead of jest.config.js, so you may need to update there instead.

本文标签： javascriptHow to add module aliases to Jest testing in NextjsStack Overflow