问题描述
在使用 Jest 进行前端测试过程中，有时会遇到类似以下错误提示：
Cannot find module 'xxx' from 'yyy.js'
其中，xxx 表示缺失的模块名称，yyy.js 表示引用该模块的文件路径。这种错误会导致测试无法进行，严重影响开发效率。
问题原因
这种错误出现的原因往往是由于模块路径的问题。Jest 默认使用 Node.js 的模块解析规则进行路径解析，但是这种规则并不适用于所有情况。例如，当我们在项目中使用了别名（alias）或者路径映射（path mapping）时，就会出现上述错误。
解决方案
为了解决这个问题，我们需要做以下两个步骤：
1. 配置 Jest
在 Jest 的配置文件中，我们需要添加以下内容：
module.exports = {
// ...
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
}
}其中，moduleNameMapper 选项用于设置模块名称到路径的映射关系。这里我们使用正则表达式将以 @/ 开头的模块名称映射到 src/ 目录下对应的文件。
2. 修改代码
在代码中，我们需要将原来的相对路径引用改为模块名称引用。例如，我们原来可能会写：
import xxx from '../path/to/xxx'
现在，我们需要改为：
import xxx from '@/path/to/xxx'
这样，Jest 就可以正确解析模块路径，避免出现“cannot find module”错误了。
示例代码
以下是一个示例代码，演示了如何使用 Jest 进行测试，并且避免出现“cannot find module”错误。
-- -------------------- ---- -------
-- ----------
------ ------- -------- ------ -- -
------ - - -
-
-- ---------------------
------ --- ---- -------
--------------- -- -- -
---------- - - - -- ----- --- -- -- -
------------- -----------
--
--在这个示例中，我们将 add 函数定义在 src/add.js 文件中，并且使用了别名 @ 来表示 src/ 目录。在测试文件 __tests__/add.test.js 中，我们使用 import add from '@/add' 来引用 add 函数，这样就避免了出现“cannot find module”错误。
总结
在使用 Jest 进行前端测试时，遇到“cannot find module”错误是很常见的问题。这种错误通常是由于模块路径的问题导致的。为了解决这个问题，我们需要在 Jest 的配置文件中添加 moduleNameMapper 选项，并且在代码中使用模块名称引用来代替相对路径引用。这样，我们就可以避免出现这种错误，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/661653fbd10417a2226440f6