解决使用 Jest 测试时无法识别 ES6 模块的问题

背景

在前端开发中，使用 Jest 进行单元测试是一个常见的做法。然而，当我们在测试 ES6 模块时，可能会遇到无法识别模块的问题，导致测试失败。

原因

Jest 默认使用 CommonJS 模块系统，而 ES6 模块系统与 CommonJS 不兼容。因此，Jest 无法直接识别 ES6 模块。

解决方案

方案一：使用 Babel 转换

我们可以使用 Babel 将 ES6 模块转换为 CommonJS 模块，从而让 Jest 能够识别。

1. 安装依赖：

   npm install --save-dev @babel/core @babel/preset-env babel-jest

2. 在项目根目录下创建 .babelrc 文件，并添加以下内容：

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

   这里的配置意为使用最新的 Babel 转换规则，并支持当前版本的 Node.js 环境。

3. 修改 Jest 配置文件 jest.config.js，添加以下内容：

   module.exports = {
     transform: {
       '\\.(js|jsx|ts|tsx)$': 'babel-jest'
     }
   }

   这里的配置意为将所有 .js、.jsx、.ts、.tsx 文件使用 Babel 进行转换。

方案二：使用 esm 模块

我们也可以使用 esm 模块来解决 Jest 无法识别 ES6 模块的问题。

1. 安装依赖：

   npm install --save-dev esm

2. 修改 Jest 配置文件 jest.config.js，添加以下内容：

   module.exports = {
     transform: {},
     setupFilesAfterEnv: ['esm']
   }

   这里的配置意为关闭 Jest 的默认转换器，并在测试之前加载 esm 模块。

示例代码

下面是一个简单的示例代码，演示如何使用 Babel 转换 ES6 模块：

math.js

export const add = (a, b) => {
  return a + b;
}

export const subtract = (a, b) => {
  return a - b;
}

math.test.js

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

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

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

.babelrc

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

jest.config.js

module.exports = {
  transform: {
    '\\.(js|jsx|ts|tsx)$': 'babel-jest'
  }
}

总结

使用 Jest 进行单元测试时，遇到无法识别 ES6 模块的问题，可以使用 Babel 转换或者 esm 模块来解决。这里我们介绍了两种解决方案，并提供了示例代码。希望本文能够对大家有所帮助。

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