在前端开发中，我们经常要测试基于 Http 的服务。我们需要保证这些服务正常工作，没有 bug 和性能问题。Jest 是一个功能强大的测试框架，它可以帮助我们进行测试并提供丰富的 API。本文将介绍如何使用 Jest 测试基于 Http 的服务。
安装 Jest
首先，我们需要安装 Jest。可以使用 npm 或 yarn 进行安装：
npm install --save-dev jest
或者
yarn add --dev jest
编写测试用例
假设我们有一个基于 Http 的服务，它提供了一些 API。我们想要测试这些 API。具体来说，我们要测试以下两个 API：
-- -------------------- ---- ------- ----- -------- ---------- - ----- -------- - ----- -------------------- ----- ---- - ----- ---------------- ------ ----- - ----- -------- --------------- - ----- -------- - ----- ------------------------------ ----- ---- - ----- ---------------- ------ ----- -
这些 API 都返回一个 Promise，它会 resolve 成一个 JSON 对象。我们可以使用 Jest 的 expect 和 async/await 来编写测试用例。
-- -------------------- ---- ------- -------------- ------ ------ -- ----- -- ------- ----- -- -- - ----- ----- - ----- ----------- -- -- -------- -- ---------------------------------------- -- ---------- --- ------------- ------ ------ --- ------- ------ ----- -- -- - ----- ------ - ---- ----- ---- - ----- ---------------- -- -- ------- -- ----------------------------- -- ------- -- ------- ---
对于 getUsers 函数，我们期望它返回一个数组。因此我们使用了 Array.isArray() 来判断返回值是否为数组。而对于 getUser 函数，我们使用了一个固定的 userId（123）来测试。我们期望 getUser 函数返回与这个 userId 对应的用户对象。因此我们判断返回值中的 id 是否与参数相等。
Mock Http 请求
在测试中，我们不希望真的发送 Http 请求。因此我们需要使用 Jest 的 mock 功能。我们可以使用 jest.mock 来 mock 掉 fetch 函数。
global.fetch = jest.fn(() => Promise.resolve({
json: () => Promise.resolve([{ id: 1, name: 'John' }])
}));
test('getUsers should return an array of users', async () => {
const users = await getUsers(); // 调用 getUsers 函数
expect(users).toEqual([{ id: 1, name: 'John' }]); // 判断返回值是否为预期值
});在这个示例中，我们使用了一个 fake 的 fetch 函数，它总是返回一个带有一个 user 对象的数组。我们期望 getUsers 函数返回这个数组，因此我们使用了 toEqual 来判断返回值是否为预期值。
同步测试
除了异步测试，Jest 也支持同步测试。例如：
function add(a, b) {
return a + b;
}
test('add should return the sum of two numbers', () => {
const result = add(1, 2);
expect(result).toBe(3);
});在这个示例中，我们测试了一个同步函数，它返回两个数的和。我们期望它返回 3，因此我们使用了 toBe 来判断返回值是否为 3。
总结
在本文中，我们介绍了如何使用 Jest 测试基于 Http 的服务。我们学习了如何编写测试用例，如何使用 Mock 和如何进行同步测试。我们希望这篇文章可以对你的测试工作提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64993eca48841e9894638814