如何在Next.js中向Jest测试添加模块别名？

Question

目前，我在我的Next.js项目中使用自动导入，在根目录中由jsconfig.json配置：

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

当我在根目录的test目录中添加jest测试时，测试并不指向根目录。我试过：

• 添加指向根目录的jest.config.js文件
• 将typeAcquisition附加到jsconfig.js
• 将jsconfig.js添加到tests目录。

我不知道哪一条路是正确的，也不知道如何正确地设置这条路，但这些似乎都不适合我。我可以通过删除所有导入来运行测试，而只需要../../-ing通过目录，但这也要求我更改所有嵌套文件--也就是说，在pages/api/budget中，我调用一个处理程序转到functions/api/fetchBudget。为了使Jest测试达到目的，我必须更改这两种测试的导入语句，以使用标准的../../语法，而不是我设置的@pages/..或@functions。

TL;DR:如何设置Jest测试以通过项目的根目录jsconfig.json；或者，如何用它自己的jsconfig.json来设置Jest测试

Answer 1

您必须配置Jest来解析导入，以匹配jsconfig.json文件中的路径。这是通过您的moduleNameMapper文件中的jest.config.js属性完成的。

// jest.config.js

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

有关更多细节，请查看Next.js测试文档。

Answer 2

我建议在您的项目中添加ts-jest (npm、-D、ts-jest)。之后，应该实现pathsToModuleNameMapper函数将您的路径从tsconfig注入到jest.config设置中：

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

Answer 3

问题是，我想要自动添加与tsconfig.json中定义的昵称相同的昵称，而不是在jest中再次添加。

我把"@components/(.*)": "<rootDir>/src/components/$1",添加到jest.config.js中，但这不是正确的解决方案，