当我们进行前端开发时，我们经常要使用外部依赖项（例如 React、jQuery 等）。然而，在测试我们的代码时，我们不想实际使用这些依赖项，而是想模拟它们的行为。为了解决这个问题，我们可以使用 Jest 与 Webpack 一起模拟外部依赖项。
Jest
Jest 是一个用于测试 JavaScript 代码的工具，它提供了丰富的 API 和测试工具。其中一个重要的功能是模拟外部依赖项，以便我们可以测试我们的代码。
假设我们有一个函数 getUser，它使用了 axios 库来获取用户数据：
import axios from 'axios';
export const getUser = async (userId) => {
const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`);
return response.data;
};为了模拟 axios 库，我们可以使用 Jest 提供的 jest.mock 函数。这个函数接受一个模块路径，并返回一个模拟模块：
-- -------------------- ---- -------
------ - ------- - ---- ------------
------ ----- ---- --------
-------------------
------------------- -- -- -
---------- ------ ---- ------ ----- -- -- -
----- ----------- - ------
-----------------------------------
----- -
----- ----- -----
--
---
----- -------- - ----- -------------
----------------------------------- ------
---
---在这个示例中，我们使用 jest.mock 来模拟 axios 模块。然后，我们在测试中使用 mockResolvedValue 方法来指定当我们调用 axios.get 方法时，应该返回哪些数据。最后，我们检查我们的函数是否正确地解析了返回的数据。
Webpack
与 Jest 不同，Webpack 是一个用于构建 JavaScript 应用程序的工具。它可以将多个 JavaScript 文件打包到单个文件中。当我们使用依赖项时，Webpack 会根据我们的配置将它们打包到最终的文件中。
然而，在测试时，我们不想实际使用我们的依赖项，而是想模拟它们的行为。这就是Webpack 的 resolve.alias 配置可以派上用场的地方。
假设我们有一个 main.js 文件，它依赖 lodash 库：
import _ from 'lodash';
export const sum = (a, b) => {
return _.add(a, b);
};为了在测试中模拟 lodash 库，我们可以在Webpack配置文件中使用 resolve.alias 配置，将实际的 lodash 模块替换为我们的模拟模块：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
-- ---
-------- -
------ -
------- ----------------------- ---------------------------
--
--
--在这个示例中，我们使用 resolve.alias 配置将 lodash 模块映射到我们的模拟模块 ./tests/mocks/lodash.js。我们的模拟模块可能看起来像这样：
export const add = (a, b) => {
return a + b;
};现在，当我们在测试中引用 lodash 模块时，我们实际上会得到我们的模拟模块。这样，我们就可以测试我们的代码，而不用实际地使用外部依赖项。
总结
在本文中，我们探讨了如何使用 Jest 与 Webpack 来模拟外部依赖项。我们学习了如何使用 jest.mock 函数模拟模块，并使用 resolve.alias 配置在测试时模拟外部依赖项。
使用这些技术，我们可以更轻松地测试我们的前端代码，而不用实际地使用外部依赖项。这对于快速迭代和确保代码质量非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486be8848841e9894545d31