Webpack 在Jest中解析文件路径

我有一个基于React的应用程序，其中有一个测试文件，我打算通过Jest运行它。该测试需要从其他文件导入类。我导入的文件进一步导入其他文件，依此类推。该项目有许多路径的别名，以减少导入路径时的键入（这在Webpack中配置）

---

当我在npm中运行

jest

命令时，我得到一个错误，说“找不到模块…”。运行Jest时如何解析文件路径？我无法模拟这些模块，因为它们是运行测试所需的自定义模块。

Jest可以使用

moduleNameMapper

您也可以在这里定义与webpack中相同的别名。这应该可以让jest解决这些问题

从文件中：

最后，我们只需要处理网页包别名。为此，我们 可以再次使用moduleNameMapper选项

//package.json
{
“笑话”：{
“模块路径”：[“/shared/vendor/modules”]，
“moduleFileExtensions”：[“js”，“jsx”]，
“模块目录”：[“节点模块”、“鲍尔组件”、“共享”]，
“moduleNameMapper”：{
“^react（.*）$”：“/vendor/react master$1”，
“^config$”：“/configs/app config.js”，
“\\（css | less）$”：“/\uu mocks\uuu/styleMock.js”，
“\\（gif | ttf | eot | svg）$”：“/\uu mocks\uuu/fileMock.js”
}
}
}

---

您也可以尝试在ModuleDirectory中添加别名文件夹

"moduleDirectories": [
  "src",
  "node_modules"
]

当我想使用绝对导入而不是相对导入时，我使用这种方法，如下所示：

import SomeComponent from 'components/SomeComponent'

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

import {RepositoryController} from '@/controller/repository'

---

注意：我的components文件夹位于/src

下。您可以向Jest配置文件中添加一行，如下所示：

import SomeComponent from 'components/SomeComponent'

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

import {RepositoryController} from '@/controller/repository'

---

它映射到

project\u root/src/controller/repository

。这比相对路径要好得多：

。/../../src/controller/repository

我的项目通常需要的路径

如果你听了笑话，遇到了提到以下内容的部分，那就提醒其他人：

生成基本配置文件： 根据您的项目，Jest将询问您几个问题，并将创建一个基本配置文件，其中包含每个选项的简短描述

然后，它将为您生成一个

jest.config.js

文件

随后的Jest文档（以及其他帖子）将参考在

包.json

中放置配置选项，如果您继续将配置更改放在那里（如本线程和其他线程中建议的更改），Jest将忽略它并查看您的

Jest.config.js

---

（如果你像我一样）然后你会把头撞到墙上，试图弄明白为什么你添加的配置选项在一步一步地遵循之后仍然不起作用，后来才意识到相对空的

jest.config.js

文件正在挤压您一直试图在

package.json

中工作的所有内容，而jest完全忽略了这一点

什么对webpack ^5有效：

从package.json中删除任何jest-config（如上@Eric）解释了原因，并按照@levibostian的建议将此属性添加到jest.config.json中：

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

moduleNameMapper:{
“^@/（.*）$”：“/src/$1”，
},

我不能这样做，因为这是一个大型项目，有很多别名。由于依赖项是递归的，所以很难过滤测试所需的依赖项。恐怕您必须重新定义它们才能使其工作。如果您使用的是typescript，您也可以尝试在

tsconfig.json

中的

路径中添加别名，但无论哪种方式，您都需要为jest重新定义别名。我正在尝试，但仍然会出错。我在
package.json
：
“moduleNameMapper”：{“react common”：C:\…react\common}
。我正在从“react common/components”

导入位于

react/common/components

中的组件，如

import{xyz}，但它无法解析此路径。无法将jest config中定义的映射组件路径与映射路径的子路径组合在一起吗？您需要使用正则表达式，如示例中的“^code>”^react（.*）”：“/vendor/react master$1”，

来映射子路径。YMMV，但是，像这样的额外复杂性让我觉得别名不值得仅仅为了节省一点输入。我如何配置如下的多个路径：'从'@xyz/ngx ndbx/datefield/xyz ngx ndbx datefield'导入{NxDatepickerComponent}；''从“@xyz/ngx ndbx/datefield”；”导入{NX_DATE_FORMATS}并在模块映射中使用了以下内容：“^@xyz/（.*）$”：“/node_modules/@xyz/$1”，但不起作用。你能指出这里的问题吗？我已经为此苦干了好几个小时了我想你正在寻找模块<源代码中的code>export和

import

语句创建模块。moduleMap for jest只允许您使用

@xyz

查找目录，但它需要模块才能成功导入。