在前端开发中，我们经常要测试基于 Http 的服务。我们需要保证这些服务正常工作，没有 bug 和性能问题。Jest 是一个功能强大的测试框架，它可以帮助我们进行测试并提供丰富的 API。本文将介绍如何使用 Jest 测试基于 Http 的服务。
安装 Jest
首先，我们需要安装 Jest。可以使用 npm 或 yarn 进行安装：
--- ------- ---------- ----
或者
---- --- ----- ----
编写测试用例
假设我们有一个基于 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 函数。
------------ - ---------- -- ----------------- ----- -- -- ------------------ --- -- ----- ------ --- ---- -------------- ------ ------ -- ----- -- ------- ----- -- -- - ----- ----- - ----- ----------- -- -- -------- -- ------------------------ --- -- ----- ------ ---- -- ----------- ---
在这个示例中，我们使用了一个 fake 的 fetch 函数，它总是返回一个带有一个 user 对象的数组。我们期望 getUsers 函数返回这个数组，因此我们使用了 toEqual 来判断返回值是否为预期值。
同步测试
除了异步测试，Jest 也支持同步测试。例如：
-------- ------ -- - ------ - - -- - --------- ------ ------ --- --- -- --- --------- -- -- - ----- ------ - ------ --- ----------------------- ---
在这个示例中，我们测试了一个同步函数，它返回两个数的和。我们期望它返回 3，因此我们使用了 toBe 来判断返回值是否为 3。
总结
在本文中，我们介绍了如何使用 Jest 测试基于 Http 的服务。我们学习了如何编写测试用例，如何使用 Mock 和如何进行同步测试。我们希望这篇文章可以对你的测试工作提供一些帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64993eca48841e9894638814