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

hyrbngr7 于 2023-08-01 发布在 Jest

关注(0)|答案(4)|浏览(159)

目前我在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测试达到它，我必须更改这两个文件的import语句，以使用标准的../../语法，而不是我设置的@pages/..或@functions。

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

jestjs

来源：https://stackoverflow.com/questions/70430316/how-to-add-module-aliases-to-jest-testing-in-next-js

4条答案

按热度按时间

relj7zay1#

我建议在你的项目中添加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);

字符串

赞(0）回复(0）举报 2023-08-01

cnwbcb6i2#

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

// 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测试文档。

赞(0）回复(0）举报 2023-08-01

ajsxfq5m3#

问题是我想自动添加与tsconfig.json中定义的相同的昵称，而不是在jest config中再次添加。
我把"@components/(.*)": "<rootDir>/src/components/$1",添加到jest.config.js中，它工作了，但它不是正确的解决方案，

赞(0）回复(0）举报 2023-08-01

rnmwe5a24#

正如上面提到的答案，添加以下内容确实解决了Cannot find module问题：

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

字符串
但让我感到困惑的是，将该属性添加到新的jest.config.js文件中并不起作用，因为该项目已经在package.json中的jest属性下编写了jest配置：

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

型
这个package.json配置被用来代替jest.config.js，所以你可能需要更新那里。

赞(0）回复(0）举报 2023-08-01

我来回答

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

4条答案

相关问题

热门标签

最新问答