本文介绍如何在 Jest 中维护动态导入的 Web，涉及到 Webpack、Babel、Jest 的使用和配置。动态导入是指在代码运行时才加载某些模块，这些模块通常是比较大、复杂、依赖较多的模块，而且可能只在某些特定的情况下才会被用到，通过动态导入可以延迟加载这些模块，从而优化应用的性能和加载速度。
如何使用动态导入
动态导入可以用 import() 函数来实现，例如：
import('./module.js').then(module => {
// Use module.
});import() 函数返回一个 Promise 对象，当指定的模块加载完成后，该 Promise 对象才会被解析。这样就可以按需加载模块，而不是一次性加载全部模块。
在 Webpack 中使用动态导入
Webpack 默认会将所有模块打包成一个文件，而在使用动态导入时，我们通常希望将这些模块单独打包成多个文件，这可以通过配置 Webpack 来实现。
首先需要安装 @babel/plugin-syntax-dynamic-import 插件，这个插件可以让 Babel 解析动态导入语法，安装方法如下：
npm install --save-dev @babel/plugin-syntax-dynamic-import
然后需要在 Babel 的配置文件中添加该插件：
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}接着需要在 Webpack 的配置文件中添加以下配置：
output: {
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].chunk.js',
},其中 chunkFilename 指定了动态导入模块的打包文件名格式。
最后，在代码中使用动态导入来引入模块：
import('./module.js').then(module => {
// Use module.
});这样就可以将 module.js 打包成单独的文件，并在需要时动态加载。
在 Jest 中测试动态导入
Jest 默认使用 jsdom 来模拟浏览器环境，但是 jsdom 并不支持动态导入功能，因此需要配置 Jest 来支持动态导入。
首先需要安装 jest-environment-jsdom-sixteen 插件，这个插件可以让 Jest 使用 JSDOM16+，而 JSDOM16+ 支持动态导入功能，安装方法如下：
npm install --save-dev jest-environment-jsdom-sixteen
然后可以在 Jest 的配置文件中添加以下配置：
testEnvironment: 'jest-environment-jsdom-sixteen', transformIgnorePatterns: [ '/node_modules/(?!(@babel|module-to-cdn|other-package)/)', ],
其中 testEnvironment 指定了 Jest 使用 jest-environment-jsdom-sixteen 插件，transformIgnorePatterns 指定了哪些模块需要忽略 Babel 转换。
最后，在测试代码中使用动态导入来引入模块：
test('test dynamic import', async () => {
const module = await import('./module.js');
expect(module.foo()).toBe('bar');
});这样就可以测试动态导入模块的功能了。
示例代码
以下是一个完整的示例代码，包含了 Webpack 配置、Babel 配置、Jest 配置和测试代码：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------------------
-------------- ------------------------------
----- ----------------------- --------
----------- ----
--
------- -
------ -
-
----- --------
-------- ---------------
---- ---------------
--
--
--
------------- -
------------ -
------------ -
--------------- -
----- -------------------------
--------- ----
------------------- -----
--------- ------------------------
--
--
--
--
--
-- ---------------
-------------- - -
-------- ---------------------- - -------- ---------- ----
-------- ----------------------------------------
--
-- --------------
-------------- - -
---------------- ---------------------------------
------------------------ -
----------------------------------------------------------
--
--
-- ---------
------ -------- ----- -
------ ------
-
-- --------
----------------------------- --- -- -- -
-------------------
---
-- -------------
---------- ------- -------- ----- -- -- -
----- ------ - ----- ----------------------
---------------------------------
---结论
在 Jest 中维护动态导入的 Web 可以通过配置 Jest 来支持动态导入功能，这样就可以在测试代码中使用动态导入来引入模块，并进行相应的测试。同时，在使用 Webpack 打包时，需要注意将动态导入的模块单独打包成多个文件，从而优化应用的性能和加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fb951d44713626015efbdb