在前端开发中，我们经常会使用 Jest 来进行单元测试。然而，在实际使用过程中，我们可能会遇到 Jest 无法识别 ES modules 的问题。
问题描述
Jest 是基于 CommonJS 模块系统来工作的。在 ES modules 中，我们可能使用了 import/export 来进行模块化。当我们在 Jest 中使用 ES modules 时，就会出现以下报错：
TypeError: Cannot use import statement outside a module
这是因为 Jest 默认情况下无法识别 ES modules 的语法，而只识别 CommonJS 模块。因此，需要对 Jest 进行配置，才能让其正确识别 ES modules。
解决方式
方案一：使用 Babel 转换 ES modules
我们可以使用 Babel 来将 ES modules 转换成 CommonJS 模块。这个方案需要安装 @babel/preset-env 和 @babel/plugin-transform-modules-commonjs 两个依赖包。
npm install --save-dev @babel/preset-env @babel/plugin-transform-modules-commonjs
在项目的根目录下创建 .babelrc 文件，输入以下配置：
{ "presets": [ "@babel/preset-env" ], "plugins": [ "@babel/plugin-transform-modules-commonjs" ] }
可以看到，我们使用了 @babel/preset-env 来转换所有的现代 JavaScript 语法（包括 ES6）为 ES5，以使其能够在更旧的浏览器上运行。同时，我们还使用了 @babel/plugin-transform-modules-commonjs 来将 ES modules 转换成 CommonJS 模块。
完成以上的配置后，我们还需在 Jest 的配置文件中，添加对 Babel 配置文件的引用。在 jest.config.js 或者 package.json 中添加以下代码：
{ "jest": { "transform": { "^.+\\.jsx?$": "babel-jest" } } }
这样，当我们在运行 Jest 的时候，就会性正确解析 ES modules 的语法。
方案二：使用 Jest 的 esModules 选项
如果你不想使用 Babel，我们还可以使用 Jest 内置的 esModules 选项来解决这个问题。
我们来看一个 Vue 项目中的配置：
-- -------------------- ---- ------- - ------- - ------------------- - ----------- ------------------ -- ----------------------- - ----- ------- ----- -- ------------ - ------------ ------------------------------------ -------------- --------------------------------- -- ------------------ ----- ---------------------- - -------------------- --------------- --------------------- -- ---------------------- - -------------------------------------------- -- ------------ - ------------------------------------------------ -- ---------- -------------------- ---------- ----- ---------- - ----------- - ------------ ---- - - - -展开代码
可以看到，我们在 globals 选项中使用了 esModules 来开启 Jest 的 ES modules 解析选项。这样，我们在运行 Jest 时，就可以正常解析 ES modules 的语法。
总结
Jest 无法识别 ES modules 的问题，可以使用 Babel 的配置来解决问题，也可以直接使用 Jest 的 esModules 选项来解决问题。不管使用哪种方式，都十分简单易懂。希望这篇文章可以帮助大家更好地使用 Jest 进行单元测试。
示例代码
-- -------------------- ---- ------- -- ------- -- -------- ------ -------- ----- - ------ ------ ------- - -- -- ------ - --- - ---- ---------- ------------------- -- ---------------------------- -- -------- -- -------------- -------------- - - ---------- - ------------------------- ----------------------------------- -- ------------------------ ---------------------------------------------------- ------ ------------------ --------------------- ------ ------ ----- ------ ------- ------- -- -- ---------------------------- -- -------- -- -------------- -------------- - - ---------- - ------------------------- ------------ -- ----------------- - ----------- ------------------ -- --------------------- ------ ------ ------- ------- ---------- - ------------------------------------------------------------------------------- -- -------- -------------------- -------- - ----------- - ------------ ---- - - --展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b8ddf9add4f0e0ff16e2e0
