当导入具有绝对路径的组件时，Jest 报错“Cannot find module - 无法找到模块”

小开

最佳答案

从 package.json开始，你有:

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

这意味着您导入的每个模块将首先查看 node_modules，如果没有找到，将查看 src目录。

因为它查找的是 src目录，所以你应该使用:

import AppContainer from 'views/app';

请注意，此路径是 src目录的绝对路径，您不必定位它作为相对路径。

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

小开

我想你要找的是: 根或者模组路径和模块目录

可以同时添加相对路径和绝对路径。

我将确保在根数组中包含 <rootDir>，在 modulePath 数组中包含 <rootDir>，在 moduleDirectory 数组中包含 node_modules，除非您有很好的理由排除它们。

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

小开

添加

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

如果在 package.json 文件中有 Jest 的配置，那么应该可以工作。

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

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

小开

添加 __esModule:true为我修复了这个问题。

jest.mock('module',()=>({
__esModule: true,                    // this makes it work
default: jest.fn()
}));

希望这对某些人有所帮助。虽然这个问题不是很具体。

小开

对于那些谁是从头开始与 Webpack 和 Babbel 的东西。尝试以下步骤:

删除 node _ module 文件夹，然后再次安装(这就解决了我的问题)。
下面是设置 Webpack 所需文档的链接，在某些情况下，这些文档是不必要的。Jestjs.io/Docs/Webpack”rel = “ nofollow noReferrer”> Jest Docs Webpack
这里有一个文档链接，解释了如何设置 Jest with React (不使用 Create-React-App)。< a href = “ https://jestjs.io/Docs/lessons-response # setup-without-create-response-app”rel = “ nofollow noReferrer”> Jest React Docs

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"
}

},

小开

我想使用的一个模块有一个 .cjs扩展。在 jest.config.js中增加 .cjs到 moduleFileExtensions为我解决了这个问题。

以我的 jest.config.js为例:

module.exports = {
moduleNameMapper: {
// see: https://github.com/kulshekhar/ts-jest/issues/414#issuecomment-517944368
"^@/(.*)$": "<rootDir>/src/$1",
},
preset: "ts-jest/presets/default-esm",
globals: {
"ts-jest": {
useESM: true,
},
},
testEnvironment: 'jsdom',
transform: {
'^.+\\.vue$': 'vue3-jest',
},
moduleFileExtensions: ['json', 'js', 'jsx', 'ts', 'tsx', 'vue', "cjs"],
moduleDirectories: ["node_modules"],
};

小开

这也可能是由于 Global 安装程序文件(或它引用的任何文件)中存在的绝对导入造成的。

似乎 moduleNameMapper不应用于 globalSetup 文件。我通过切换到这些特定文件的相对导入来修复这个问题。

小开

这是因为 jest 不承认像 src/views/app这样的相对进口

在 package.json中添加根和 模组路径

"name": "my-app",
...
"jest": {
...
"rootDir": "./",
"modulePaths": [
"<rootDir>"
],
...
}
}

小开

解决方法:

在您的 jest 配置中使用“ moduleNameMapper”将使测试解析按预期工作:

"jest": {
"moduleNameMapper": {
"#(.*)": "<rootDir>/node_modules/$1"
}
}

Https://gist.github.com/lydell/d62ce96c95c035811133a5396195da14

小开

只需将“ modulePath”添加到您的包 json

"jest": {
...
"modulePaths": [
"<rootDir>"
],
...
}
}

小开

确保在更新 package.json 之后运行了 npm i或 npm install

小开

我装了 jest-expo但没装 jest。可能跟我被世博会预制弹出有关。我必须运行 yarn add jest-expo jest来安装 jest，并更新 jest-expo。现在我的测试开始了。

取决于你的设置，它可能是 npm i jest-expo jest或 expo install jest-expo jest... 从他们的文档 https://docs.expo.dev/guides/testing-with-jest/得到的想法