解决Jest中的文件路径

Question

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

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

Answer 1

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

从文档中：

最后，我们只剩下要处理的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 下有我的 components 文件夹

Answer 3

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

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

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

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

然后，你的 jest 测试中的 import 语句将如下所示：

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

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