在前端开发中，我们常常需要使用 Jest 进行单元测试。而在测试过程中，我们经常需要 Mock 掉一些依赖，以确保测试的独立性和可重复性。但是，在使用 Jest 进行测试时，我们可能会遇到一些问题，比如如何 Mock 掉 webpack 的 require。本文将详细介绍如何在 Jest 中 Mock 掉 webpack 的 require，并提供示例代码和实用的指导意义。
什么是 webpack 的 require
在深入讨论如何 Mock 掉 webpack 的 require 之前，我们需要了解一下什么是 webpack 的 require。在 webpack 中，我们通常会使用 require 来引入模块。但是，与 Node.js 中的 require 不同，webpack 的 require 是经过了一定处理的。具体来说，webpack 的 require 可以将代码打包成一个或多个 bundle，以优化代码的加载和执行。
Mock 掉 webpack 的 require
在 Jest 中，我们可以使用 jest.mock() 方法来 Mock 掉模块的依赖。但是，由于 webpack 的 require 是经过了一定处理的，我们不能直接使用 jest.mock() 方法来 Mock 掉 webpack 的 require。所以，我们需要使用一些特殊的方法来 Mock 掉 webpack 的 require。
使用 jest.mock() 和 mocks
首先，我们可以尝试使用 jest.mock() 方法和 mocks 目录来 Mock 掉 webpack 的 require。具体来说，我们可以在 mocks 目录下创建一个与依赖模块同名的文件，然后在该文件中 Mock 掉 webpack 的 require。例如，假设我们需要 Mock 掉一个名为 "foo" 的模块的 require，我们可以在 mocks 目录下创建一个名为 "foo.js" 的文件，并在该文件中 Mock 掉 webpack 的 require，如下所示：
// __mocks__/foo.js
module.exports = jest.fn(() => {
return 'mocked foo';
});然后，在测试代码中，我们可以使用 jest.mock() 方法来 Mock 掉 "foo" 模块的依赖，如下所示：
// javascriptcn.com 代码示例
// test.js
jest.mock('foo');
const foo = require('foo');
test('should return mocked foo', () => {
expect(foo()).toEqual('mocked foo');
});这种方法的优点是简单易用，但是缺点是不够灵活，只适用于 Mock 掉简单的模块。
使用 jest.requireActual()
另一种 Mock 掉 webpack 的 require 的方法是使用 jest.requireActual() 方法。该方法可以用来获取原始的模块实现，然后我们可以在测试代码中对其进行修改。具体来说，我们可以使用 jest.requireActual() 方法来获取 webpack 的 require 实现，然后使用 jest.spyOn() 方法来 Mock 掉该实现。例如，假设我们需要 Mock 掉一个名为 "bar" 的模块的 require，我们可以在测试代码中进行如下操作：
// javascriptcn.com 代码示例
// test.js
const webpackRequire = jest.requireActual('webpack');
const spy = jest.spyOn(webpackRequire, 'require');
spy.mockImplementation((path) => {
if (path === './bar') {
return jest.fn(() => {
return 'mocked bar';
});
}
return webpackRequire.require(path);
});
const bar = require('./bar');
test('should return mocked bar', () => {
expect(bar()).toEqual('mocked bar');
});这种方法的优点是灵活性高，可以 Mock 掉任意复杂的模块，但是缺点是比较繁琐。
总结
在本文中，我们介绍了如何在 Jest 中 Mock 掉 webpack 的 require。我们首先了解了 webpack 的 require 的特点，然后介绍了两种 Mock 掉 webpack 的 require 的方法。第一种方法是使用 jest.mock() 方法和 mocks 目录来 Mock 掉简单的模块，第二种方法是使用 jest.requireActual() 方法和 jest.spyOn() 方法来 Mock 掉任意复杂的模块。希望本文可以帮助您更好地进行单元测试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65782078d2f5e1655d1ffd99