在前端开发中，我们经常会使用 ES6 Module 来组织我们的代码。而在单元测试时，我们可能需要 mock 掉一些依赖的模块，以便更好地测试我们的代码。但是，当我们需要 mock 掉一个 ES6 Module 的 default 导出时，可能会遇到一些问题。本文将介绍如何在 Jest 中 mock 掉 ES6 Module 的 default 导出。
问题描述
在 Jest 中，我们可以使用 jest.mock() 方法来 mock 掉一个模块。例如，我们有如下代码：
-- -------------------- ---- ------- -- ------ ------ ------- -------- ----- - ------ ------ - -- ------ ------ --- ---- -------- ------ ------- -------- ----- - ------ ----- - - ----- - -- ----------- ------ --- ---- -------- --------- ------ ------ ---- ------ -- -- - -------------------------- ------ ---
现在，我们需要 mock 掉 foo.js 中的 default 导出，以便更好地测试 bar.js。我们可以使用 jest.mock() 方法来实现：
-- -------------------- ---- ------- -- ----------- ------ --- ---- -------- ------ --- ---- -------- ------------------ -- -- -- ----------- ----- -------- ---------- -- ------- ------ ---- --------- ------ ------ ------- --- ------ -- -- - ----------------------------- --- ------ ------------------------------------- ---
在上面的代码中，我们使用 jest.mock() 方法来 mock 掉 foo.js 模块。我们将其返回值设置为一个包含 __esModule 和 default 属性的对象，其中 default 属性是一个 jest.fn() 函数，它会返回我们想要的 mock 值。然后，在测试代码中，我们可以使用 jest.fn() 函数来验证 default 导出是否被正确地 mock 掉了。
然而，如果我们尝试运行上面的测试代码，我们会遇到一个错误：
TypeError: Cannot read property 'apply' of undefined
这是因为，当我们 mock 掉一个 ES6 Module 的 default 导出时，Jest 会尝试使用 require() 函数来加载这个模块，而 require() 函数不支持 ES6 Module 的 default 导出。
解决方案
为了解决上述问题，我们需要使用 babel-jest 插件来编译我们的代码。babel-jest 插件可以将 ES6 Module 转换为 CommonJS 模块，以便 Jest 可以正确地加载它们。
首先，我们需要安装 babel-jest 插件：
npm install --save-dev babel-jest @babel/core @babel/preset-env
然后，在 package.json 文件中，我们需要添加如下配置：
-- -------------------- ---- -------
-
------- -
------------ -
------------ ------------
-
--
-------- -
---------- -
-------------------
-
-
-这些配置告诉 Jest 在运行测试之前使用 babel-jest 插件来编译我们的代码，并使用 @babel/preset-env 预设来转换 ES6 语法。
现在，我们可以重新运行我们的测试代码了：
-- -------------------- ---- ------- -- ----------- ------ --- ---- -------- ------ --- ---- -------- ------------------ -- -- -- ----------- ----- -------- ---------- -- ------- ------ ---- --------- ------ ------ ------- --- ------ -- -- - ----------------------------- --- ------ ------------------------------------- ---
这次，我们将成功地 mock 掉了 foo.js 中的 default 导出，并且测试代码也能够正确地运行了。
总结
在 Jest 中 mock 掉 ES6 Module 的 default 导出可能会遇到一些问题，因为 Jest 不支持 ES6 Module 的 default 导出。为了解决这个问题，我们需要使用 babel-jest 插件来编译我们的代码，并将 ES6 Module 转换为 CommonJS 模块。这样，我们就可以成功地 mock 掉 ES6 Module 的 default 导出了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6516649e95b1f8cacdeb8bb3