Question

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

当我在npm中运行jest命令时，我收到错误消息“无法找到模块......”。如何在运行Jest时解析文件路径？我无法模拟模块，因为这些是运行测试所需的自定义模块。

Answer 1

Jest可以使用moduleNameMapper来处理此问题您也可以在此处定义webpack中的相同别名。这应该使jest能够解决它们。

来自文档：

最后我们只剩下要处理的webpack别名了。为此我们可以再次使用moduleNameMapper选项。

// package.json
{
  "jest": {
    "modulePaths": ["/shared/vendor/modules"],
    "moduleFileExtensions": ["js", "jsx"],
    "moduleDirectories": ["node_modules", "bower_components", "shared"],

    "moduleNameMapper": {
      "^react(.*)$": "<rootDir>/vendor/react-master$1",
      "^config$": "<rootDir>/configs/app-config.js",

      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
    }
  }
}

https://facebook.github.io/jest/docs/en/webpack.html#configuring-jest-to-find-our-files

Answer 2

您还可以尝试在moduleDirectories中添加别名文件夹

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

当我想使用绝对输入而不是相对输入时，我使用这种方法：

import SomeComponent from 'components/SomeComponent'

注意：我的组件文件夹在/ src下

Answer 3

您可以像这样在Jest配置文件中添加1行：

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

上面的配置行使用正则表达式来映射以@字符开头的导入。

注意：（以上配置代码是假设您的源代码位于“ project_root / src /”中

然后，在笑话测试中，您的import语句将如下所示：

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

哪个映射到project_root/src/controller/repository。这比相对路径要好得多：../../../src/controller/repository我的项目经常需要。

Answer 4

对于遇到此问题的任何其他人，请直说：如果您遵循笑话getting started documentation，并且遇到了提到以下内容的部分：

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

然后执行此步骤，它将为您生成一个jest.config.js文件。

随后的Jest文档（和SO帖子），然后参考在您的package.json中放入配置选项，如果继续进行并将配置更改放在那里（例如该线程和其他建议的内容），会忽略它，而是查看您的jest.config.js。

（如果您像我一样）然后将头撞在墙上，试图弄清楚为什么即使逐步进行添加，添加的配置选项仍然无法使用，只是后来才意识到相对空白的jest.config.js文件压缩了您试图在package.json中正常运行的所有内容，而Jest完全忽略了它！

Answer 5

什么对 webpack ^5 有用：

从上面的@Eric 解释了从 package.json 中删除任何 jest 配置解释了原因，并将此属性添加到 jest.config.json 就像上面建议的@levibostian：

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

在Jest中解析文件路径

5 个答案: