在前端开发中，Jest 是一个常用的测试框架。但是，当我们在 Jest 中使用 ES Modules 时，可能会遇到一些问题。本文将介绍如何解决这些问题，让你在 Jest 中愉快地使用 ES Modules。
ES Modules 是什么
ES Modules 是 JavaScript 的一个标准，用于模块化代码。它可以让我们将代码分割成多个模块，每个模块只暴露出需要对外暴露的接口，从而提高代码的可维护性和复用性。
ES Modules 的语法如下：
// 导入模块
import { foo } from './foo.js';
// 导出模块
export const bar = () => {
// ...
};Jest 中的 ES Modules 问题
在 Jest 中使用 ES Modules 时，可能会遇到以下问题：
1. Jest 不支持 ES Modules
Jest 默认使用 CommonJS 模块化规范，不支持 ES Modules，因此我们需要使用一些插件来解决这个问题。
2. Jest 中的 import 语句会被转换成 CommonJS 的 require 语句
当我们在 Jest 中使用 import 语句时，Jest 会将其转换成 CommonJS 的 require 语句，这可能会导致一些问题，比如无法正确地加载模块。
3. Jest 中无法正确地处理 ES Modules 的默认导出
ES Modules 中可以有一个默认导出，但是 Jest 无法正确地处理它，导致我们无法正确地导入该模块。
解决方案
为了解决这些问题，我们需要使用以下插件：
@babel/preset-env：用于将 ES Modules 转换成 CommonJS 模块；babel-jest：用于让 Jest 支持 ES Modules；babel-plugin-transform-es2015-modules-commonjs：用于将 ES Modules 的默认导出转换成 CommonJS 的模块导出。
下面是一份示例配置：
-- -------------------- ---- -------
-- --------------
-------------- - -
---------- -
------------ -------------
--
------------------------ ----------------------------
----------------- -
----------- -------------------
--
---------- ------------------------------
--------------------- -------
-------- -
--------- -------
--
---------------- -------
------------------- --------------------
---- -------------------- ---- ------- -- ------------- ------ ------------------ ------ - --------- - ---- --------- ------ ------- ---- -------------------------- ----------- -------- --- --------- --- -- -- -- ------- -- ----- - ----------------- - - ---------------------- ----- ----------- - ------------------- -------- ---------------------- - -------- ---------- ---- -------- -------------------------------------- - ------ ---- ---- --- -------------- - ------------
在这个配置中，我们使用了 babel-jest 插件，将 Jest 的默认转换器替换成了 Babel 转换器，从而让 Jest 支持 ES Modules。同时，我们使用了 @babel/preset-env 插件，将 ES Modules 转换成了 CommonJS 模块。
我们还使用了 babel-plugin-transform-es2015-modules-commonjs 插件，将 ES Modules 的默认导出转换成 CommonJS 的模块导出，从而解决了 Jest 无法正确处理 ES Modules 的默认导出的问题。
示例代码
下面是一个使用 ES Modules 的示例代码：
// src/utils.js export const sum = (a, b) => a + b;
// __tests__/utils.test.js
import { sum } from '../src/utils';
describe('utils', () => {
test('sum', () => {
expect(sum(1, 2)).toBe(3);
});
});在运行测试时，我们需要使用以下命令：
jest --config jest.config.js
总结
本文介绍了如何在 Jest 中使用 ES Modules，并解决了可能遇到的一些问题。通过这些技巧，我们可以更好地使用 ES Modules，提高代码的可维护性和复用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6604ff5bd10417a22227f328