Jest 解决 Bug：“ReferenceError: Your babel configuration specifies a module resolver"-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Jest 是一个非常流行的测试框架。但有时在使用 Jest 进行测试时，可能会遇到 ReferenceError: Your babel configuration specifies a module resolver 这个错误。这篇文章将介绍这个错误的原因、解决方法以及相关内容的深入学习。

问题原因

这个错误是由于配置不当引起的。具体来说，这个错误是由 Jest 在尝试解析代码时，遇到了由 babel-plugin-module-resolver 插件配置的别名，但是在 Jest 的配置中没有相应的配置，导致出现了这个错误。

该错误通常出现在笔者使用了别名，想让 Jest 能正常解析模块路径时，例如：

在 Jest 配置中没有指定别名：

// jest.config.js
module.exports = {
  "moduleNameMapper": {},
  "moduleFileExtensions": ["js", "json", "jsx", "ts", "tsx", "node"]
};

并且在项目的 .babelrc 配置中设置了别名：

// javascriptcn.com 代码示例
// .babelrc
{
  "plugins": [
    ["module-resolver", {
      "root": ["./"],
      "alias": { "@": "./src" }
    }]
  ]
}

解决方法

要解决这个问题，我们需要在 Jest 的配置中添加一个别名。

// jest.config.js
module.exports = {
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  "moduleFileExtensions": ["js", "json", "jsx", "ts", "tsx", "node"]
};

^@/(.*)$ 表示匹配所有以 @/ 开头的路径；然后将其替换为 <rootDir>/src/ 这个目录。
<rootDir> 是 Jest 内置的变量，表示项目的根目录。

这样，当 Jest 遇到别名 @ 时，就会正确地解析模块路径了。

深入学习

如果你想深入学习 Jest、babel-plugin-module-resolver 插件以及模块路径解析相关的知识，可以参考以下文档：

总结

在使用 Jest 进行测试时，遇到 ReferenceError: Your babel configuration specifies a module resolver 这个错误，很可能是因为我们使用了别名，但 Jest 的配置中没有相应的别名配置。解决方法就是在 Jest 的配置中添加一个别名。同时，如果想深入学习相关知识，可以查阅官方文档和相关资料。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65338c587d4982a6eb71965d