告别 Jest 的 “Cannot find module” 错误

在前端开发过程中，我们经常使用 Jest 进行单元测试。但是在使用 Jest 进行测试的时候，我们可能会遇到一些 “Cannot find module” 的错误。这些错误可能会导致我们的测试无法正常运行，从而影响我们的开发进度。本文将介绍几种常见的 “Cannot find module” 错误，并提供解决方案。

1. 错误示例

在使用 Jest 进行单元测试的时候，我们可能会遇到以下错误：

-- -------------------- ---- -------
----  ---------------
  - ---- ----- ------ -- ---

    ------ ---- ------ ------------------------- ---- ------------

    -------- ---- --- ---- -- -----
        ----------
        ----------------------------

    --- ----- ---- -- ------- - ---- --------- -- ---- ------- -- ------ ---- ----------------------- ----- -- --------- ------ ------ ------- --------

      -- ---------------------- -------------------------------------------------
      -- ------------------ ----------------

在这个例子中，我们的测试代码无法找到 ComponentA 组件，但是却能找到 App.js 和 ComponentB.js。这个错误通常是由于路径问题导致的。

2. 解决方案

2.1. 相对路径

在解决 “Cannot find module” 错误时，最常见的问题就是路径问题。在使用相对路径时，我们需要确保路径的正确性。

例如，在上面的错误示例中，我们的测试代码无法找到 ComponentA 组件，可能是因为我们在引用 ComponentA 组件时使用了错误的相对路径。我们可以使用正确的相对路径来解决这个问题：

import ComponentA from '../components/ComponentA';

2.2. 绝对路径

为了避免相对路径带来的路径问题，我们可以使用绝对路径来引用模块。在使用绝对路径时，我们需要使用 rootDir 配置来指定项目的根目录。

例如，在使用绝对路径引用 ComponentA 组件时，我们可以这样写：

import ComponentA from 'src/components/ComponentA';

在 Jest 的配置文件中，我们需要添加以下配置项：

{
  "rootDir": ".",
  "moduleNameMapper": {
    "^src/(.*)$": "<rootDir>/src/$1"
  }
}

这样就可以使用绝对路径来引用模块了。

2.3. 扩展名

在使用 Jest 进行单元测试时，我们需要确保我们的模块文件具有正确的扩展名。如果没有指定扩展名，Jest 会默认使用 moduleFileExtensions 配置项中的扩展名。

例如，在上面的错误示例中，我们可以使用以下代码来解决问题：

import ComponentA from './components/ComponentA.js';

或者在 Jest 的配置文件中添加以下配置项：

{
  "moduleFileExtensions": [
    "js",
    "jsx",
    "json",
    "node"
  ]
}

3. 总结

在使用 Jest 进行单元测试时，我们可能会遇到一些 “Cannot find module” 的错误。这些错误通常是由于路径问题导致的。为了解决这些问题，我们可以使用相对路径、绝对路径或者指定扩展名等方式来引用模块。希望本文能够帮助大家解决这些问题，提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6600e29dd10417a222c079d9