如何在 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.config.js指向根目录的文件
• 附加typeAcquisition到jsconfig.js
• 将 a 添加jsconfig.js到目录中tests。

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

TL;DR：如何设置 Jest 测试来遍历我的项目的根目录jsconfig.json；或者，作为替代，我如何用它自己的来设置 Jest 测试jsconfig.json？

Answer 1

我建议添加ts-jest到您的项目中 (npm i -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 2

您必须配置 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 测试文档。