使用绝对路径导入组件时,Jest 给出“无法找到module”

IT技术 node.js reactjs npm jestjs
2021-05-02 08:15:28

运行 Jest 时收到以下错误

Cannot find module 'src/views/app' from 'index.jsx'

  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
  at Object.<anonymous> (src/index.jsx:4:12)

索引.jsx

import AppContainer from 'src/views/app';

包.json

  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
    ],
    "moduleDirectories": [
        "node_modules",
        "src"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node",
      "mjs"
    ]
  },

我运行仅包含树中相对路径的文件的测试正确运行。

为了澄清,我正在寻找如何配置 Jest 以在绝对路径上不失败。

4个回答

我认为您正在寻找:rootsmodulePathsmoduleDirectories

您可以添加相对路径和绝对路径。

我会确保包含<rootDir><rootDir>root 数组、modulePaths 数组和node_modulesmoduleDirectories 数组中,除非您有充分的理由排除它们。

"jest": {
  "roots": [
    "<rootDir>",
    "/home/some/path/"
  ],
  "modulePaths": [
    "<rootDir>",
    "/home/some/other/path"
  ],
  "moduleDirectories": [
    "node_modules"
  ],
}

因为在package.json你有:

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

这表示您导入的每个module将node_modules首先被查看,如果没有找到,将被查看到src目录中。

由于它正在查看src目录,因此您应该使用:

import AppContainer from 'views/app';

请注意,此路径是src目录的绝对路径,您无需导航以将其定位为相对路径。

或者,您可以在 pakcage.json 中的 moduleDirectories 中配置根目录,以便可以根据需要导入所有组件。

添加

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

如果你的 package.json 文件中有 Jest 的配置,应该可以工作。

如果你有一个jest.config.js文件,你应该在那里添加它,否则 package.json 将被这个配置文件覆盖(并忽略)。所以在你的jest.config.js文件中:

module.exports = {
// ... lots of props
  moduleDirectories: ["node_modules", "src"],
// ...
}

对于那些使用 Webpack 和 Babbel 从头开始​​构建东西的人。尝试以下步骤:

  1. 删除 node_modules 文件夹并重新安装。(这是解决我的问题的东西)。

  2. 这是设置 Webpack 所需文档的链接,在某些情况下不需要。Jest 文档 Webpack

  3. 这是一个文档链接,该链接解释了如何使用 React 设置 Jest(不使用 Create-React-App)。Jest react文档

4. 这是一个使用 Jest 进行简单设置的示例。您可以在 package.json 或 Jest 配置文件中进行设置。

免责声明:这不能回答 OP 问题。但是大多数人最终会因为用于此问题的关键字而来到这里。

  "jest": {
"moduleFileExtensions": ["js", "jsx"],
"moduleDirectories": ["node_modules"],
"moduleNameMapper": {
  "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
  "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}

},