Jest 解决 “ModuleNotFoundError: Module not found: Error: Can't resolve '…'”
前言
当我们使用 Jest 进行前端单元测试时，可能经常会遇到以下一种错误：“ModuleNotFoundError: Module not found: Error: Can't resolve '…'”。
这个错误的出现原因往往是因为文件引用路径不正确，或者是因为 Jest 配置文件中的配置有误。在本文中，我们将详细介绍如何使用 Jest 解决这个错误，并提供示例代码以便更好地帮助 reader 们深入理解。
详解
首先，我们需要确定一下这个错误的出现原因，通常有以下两种情况：
一、文件引用路径不正确。
在前端项目中，我们经常会使用相对路径进行文件引入，但是在某些情况下，可能会因为引用路径不正确而出现上述错误。在 Jest 的环境下，我们需要特别注意这个问题。
比如，我们有一个文件“example.js”，它引用了另一个文件“util.js”，并且它们位于同一个文件夹下。那么，我们在“example.test.js”中对“example.js”进行单元测试时，可以按照以下方式进行引用：
// example.test.js
const example = require('./example');
test('test example', () => {
// test code
});然而，如果在“example.js”中引入“util.js”的方式是：
// example.js
const util = require('./utils/util');那么就会出现上述的错误，因为在 Jest 的环境下，这个路径是不存在的。此时，我们需要根据实际路径进行引用，比如：
// example.js
const util = require('../utils/util');二、Jest 配置文件中的配置有误。
如果文件路径已经确定无误，那么我们可以检查一下 Jest 配置文件中的配置是否有误。通常来说，Jest 配置文件中的“moduleNameMapper”或者“modulePaths”这些配置项可能会引起这个错误。
“moduleNameMapper”主要用于将模块名称映射为实际路径，如果配置错误，就有可能导致引用路径不正确，从而出现上述错误。
比如，我们有一个配置项：
// jest.config.js
module.exports = {
// ...
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
// ...
}该配置项将“@”符号作为模块的开头，将其映射到“src”文件夹下。如果我们将“example.js”放置在了“components”文件夹下，那么它的路径就应该是“@/components/example.js”。而在“example.test.js”中，我们可以像这样引用：
const example = require('@/components/example');如果路径配置有误，就会出现上述错误。
除此之外，我们还需要检查“modulePaths”配置项是否正确。这个配置项用于指定模块搜索的路径数组，如果配置错误，也会导致上述错误的出现。
比如，我们有一个配置项：
// jest.config.js
module.exports = {
// ...
modulePaths: [
'<rootDir>/src/components',
],
// ...
}这个配置项指定了“src/components”文件夹作为模块搜索的路径，如果我们将“example.js”放置在了该文件夹下，那么在“example.test.js”中，我们就可以这样引用：
const example = require('example');我们只需要执行“npm test”命令，Jest 就能正确地搜索到“example.js”文件，而不会出现上述错误。
指导
为了防止出现 “ModuleNotFoundError: Module not found: Error: Can't resolve '…'” 错误，我们需要注意以下几个方面：
文件引用路径要注意，尽量使用绝对路径或者相对路径。
Jest 配置文件中的配置要正确，比如“moduleNameMapper”和“modulePaths”。
如果出现错误，要仔细排查错误原因，找到引用路径正常的文件，看看能否从中找到解决方案。
示例代码
为了更好地让 reader 们理解以上所述，下面提供一个简单的示例代码：
// javascriptcn.com 代码示例
// jest.config.js
module.exports = {
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
},
modulePaths: [
'<rootDir>/src/components',
],
};
// example.js
const util = require('@/utils/util');
function example() {
return util.method();
}
module.exports = {
example,
};
// example.test.js
const example = require('@/components/example');
test('test example', () => {
expect(example.example()).toBe(1);
});以上代码简单地说明了如何正确地在 Jest 环境下进行单元测试，避免出现“ModuleNotFoundError: Module not found: Error: Can't resolve '…'”错误。
总结
Jest 解决 “ModuleNotFoundError: Module not found: Error: Can't resolve '…'” 错误是前端开发中的一个比较基础的问题，需要我们在实际开发过程中不断地学习和总结。本文对这个问题进行了详细的介绍，希望 reader 们能够通过本文的学习和实践，更好地掌握 Jest 单元测试的技巧，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6534b1907d4982a6eb9baa74