引言
Axios 是前端常用的 HTTP 请求库之一。在编写前端单元测试时，我们经常需要模拟 Axios，在不访问真正的服务器的情况下测试我们的代码。这篇文章将介绍如何在 Jest 中模拟 Axios，让我们可以轻松地编写单元测试。
通过 Jest Mock 模拟 Axios
在 Jest 中，我们可以通过 jest.mock 函数来创建一个模拟的 Axios 模块。在下面的示例中，我们将创建一个返回 Promise 解决值的 axios.get 方法。
jest.mock('axios', () => {
return {
get: jest.fn(() => Promise.resolve({ data: 'mocked data' })),
};
});在这个模拟中，我们将 axios.get 替换为一个 Jest 函数模拟。这个模拟函数返回一个 Promise，该 Promise 解决为一个对象，其中有一个 data 属性，其值为 'mocked data'。
要在测试中使用此模拟，我们只需像平常一样引用 axios，并确保模拟已被正确应用：
import axios from 'axios';
test('mock axios', () => {
return axios.get('/some-data').then(response => {
expect(response.data).toBe('mocked data');
});
});如果我们的代码中使用了其他 Axios 方法，就可以用类似的方式模拟这些方法。例如，为了模拟 axios.post 方法：
jest.mock('axios', () => {
return {
post: jest.fn(() => Promise.resolve({ data: 'mocked data' })),
};
});通过 Jest 实例模拟 Axios
除了使用 jest.mock 函数来模拟 Axios 外，我们还可以使用 Jest 所提供的 Mock 实例的方式来模拟。在下面的示例中，我们将创建一个 Axios 的 Mock 实例，并编写测试代码：
-- -------------------- ---- ------- ----- --------- - -------------------------------- ---------------- - ---------- -- ----------- --------------------------------- ----- ------- ----- --- ---------- ----- ---- ---------- ----- -- -- - ----- -------- - ----- ---------------------------- ---------------------------------- ------- ---
在这个示例中，我们首先从 Axios 模块中生成了一个 Jest Mock 实例。然后我们创建了一个 create 方法的 Jest Mock 实例，该方法返回我们的 Mock 实例本身。最后，我们为 get 方法编写了一个 Jest Mock 函数，该函数的解决值是一个对象，其中有一个 data 属性，其值为 'mocked data'。
最终，在测试中，我们只需像平常一样使用我们的 Mock 实例，并确保模拟已被正确应用。
总结
在 Jest 中模拟 Axios 可以帮助我们编写没有副作用的单元测试。我们可以使用 jest.mock 函数或 Jest Mock 实例来模拟 Axios，并在测试中使用模拟函数来代替实际的 Axios 方法。这样，我们就可以避免访问真正的服务器，并且确保我们的测试代码可以独立地运行和验证。
示例代码：
-- -------------------- ---- -------
-- -- --------- -- -----
------------------ -- -- -
------ -
---- ---------- -- ----------------- ----- ------- ----- ----
----- ---------- -- ----------------- ----- ------- ----- ----
--
---
------ ----- ---- --------
---------- ----------- -- -- -
------ ------------------------------------- -- -
---------------------------------- -------
---
---
---------- ------------ -- -- -
------ ------------------------ ----------------- -- -
---------------------------------- -------
---
---
-- -- ---- ---- -----
----- --------- - --------------------------------
---------------- - ---------- -- -----------
--------------------------------- ----- ------- ----- ---
---------- ----- ---- ---------- ----- -- -- -
----- -------- - ----- ----------------------------
---------------------------------- -------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ef59648841e9894d57d68