背景
在前端开发中，单元测试是非常重要的一环。而 Jest 是一款流行的 JavaScript 测试框架，其通过提供了丰富的 API 让开发者能够轻松写出高质量的单元测试。
不过，当我们需要测试的代码依赖于其他模块时，就需要模拟这些依赖项的行为，以确保测试代码的准确性和可靠性。
本文将通过几个示例，介绍如何在 Jest 中模拟现实世界的依赖项，并分享一些相关的学习和指导意义。
示例
1. 模拟函数依赖
假设我们有一个 getUserInfo 函数，其依赖于一个名为 request 的异步请求库，并返回一个 Promise，示例代码如下：
// getUserInfo.js import request from 'request'; export const getUserInfo = (userId) => { return request(`/user/${userId}`); };
为了被测试代码不依赖于真实的 request 库，我们需要模拟这个依赖，以便于在测试时确保 getUserInfo 函数的行为是否正确。
首先我们需要在测试文件中将 request 模块记为 mock 模块：
// getUserInfo.test.js jest.mock('request');
接着我们需要定义 request 的实际行为：
-- -------------------- ---- ------- -- ------------------- ------ - ----------- - ---- ---------------- ----------------------- -- -- - ------------ ------ ------- ---- ------ ----- -- -- - ----- ------------ - - ----- ------- ---- -- -- ----------------------------- -- ------------------------------- ----- ------ - ---- ----- -------- - ----- -------------------- --------------------------------------- --- ---展开代码
上述代码中，我们使用了 Jest 提供的 mockImplementation API，模拟了一个异步函数，并通过使用 Promise.resolve 方法返回一个 mock 数据。这样我们就能在测试中确保 getUserInfo 函数执行的正确性。
2. 模拟对象依赖
假设我们有一个名为 userService 的对象，其提供了一个名为 getUserInfo 的方法，并通过异步请求返回用户信息，示例代码如下：
-- -------------------- ---- ------- -- -------------- ------ ------- ---- ---------- ------ ----- ----------- - - ------------ ----- -------- -- - ----- -------- - ----- --------------------------- ------ --------------------- - --展开代码
为了在测试中不依赖于真实的 request 模块，我们需要使用 Jest 的 mock 实现来模拟 userService 对象。
首先我们需要在测试文件中将 userService 对象记为 mock 对象，并为其预设一个 getUserInfo 方法：
-- -------------------- ---- ------- -- ------------------- ----- ------------ - - ----- ------- ---- -- -- -------------------------- -- -- -- ------------ - ------------ ---------- -- ------------------------------ - ----展开代码
然后我们可以编写测试代码：
-- -------------------- ---- ------- -- ------------------- ------ - ----------- - ---- ---------------- ----------------------- -- -- - ------------ ------ ------- ---- ------ ----- -- -- - ----- ------ - ---- ----- -------- - ----- -------------------------------- ------------------------------------------------------------- --------------------------------------- --- ---展开代码
在本示例中，我们首先使用了 Jest 的 mock 实现，模拟了 userService 对象；然后预设了一个 getUserInfo 方法模拟真实的结果。
最后，我们使用了 Jest 提供的的 toHaveBeenCalledWith API 来确保被测试的函数 getUserInfo 是否按预期被调用了。
3. 模拟模块依赖
模块如 Lodash、Moment 等在我们的业务逻辑中很常见。在这种情况下，我们需要模拟依赖项。
假设我们有一个名为 getUserName 的函数，其依赖于一个名为 lodash 的模块进行字符串操作，示例代码如下：
// getUserName.js import _ from 'lodash'; export const getUserName = (firstName, lastName) => { const fullName = `${firstName} ${lastName}`; return _.capitalize(fullName); };
为了测试我们的逻辑代码，我们需要使用 Jest mock module 的功能来模拟策略，以更好地与其他逻辑分离。
首先我们需要在测试文件中将 lodash 模块记为 mock 对象：
// getUserName.test.js jest.mock('lodash', () => ({ capitalize: jest.fn((str) => str) }));
然后我们可以编写测试代码：
-- -------------------- ---- ------- -- ------------------- ------ - ----------- - ---- ---------------- ----------------------- -- -- - ------------ ---------- --- ------ -- -- - ----- --------- - ------- ----- -------- - ------ ----- -------- - ---------------------- ---------- ------------------------------ ------ ---------------------------------------------------- --- ---展开代码
在本示例中，我们首先将 lodash 模块模拟为具有预设实现的 mock 对象，然后我们使用 Jest 的 toHaveBeenCalledWith API 来确保在调用真实 getUserName 函数时，其调用的 _.capitalize 函数产生了预期的结果。
学习及指导意义
在前端开发中，单元测试是不可避免的，而 Jest 是目前最流行的 JavaScript 测试框架之一，它提供了丰富的 API 和强大的 mock 功能。
当我们需要在 Jest 中模拟现实世界的依赖项时，我们可以采用不同的 mock 策略。这样我们就能够隔离被测代码与代码的依赖项之间的关系，并确保测试代码的准确性和可靠性。
对于前端工程师而言，掌握如何使用 Jest 的 mock 实现来模拟依赖项，将会大大提高代码质量和测试覆盖率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c2114e314edc2684b0aa8e
