在 Chai 测试中使用 sinon:如何测试异步操作

阅读时长 6 分钟读完

在前端应用程序的开发中,异步操作是非常普遍的。但是如何测试异步操作却是开发者们的一个难点。sinon 是一个流行的 JavaScript 测试工具,它的出现使得测试异步操作变得更加容易。本篇文章将会介绍如何在 Chai 测试框架中使用 sinon 测试异步操作。

什么是 sinon?

Sinon 是一个 JavaScript 库,主要用于进行单元测试。它可以轻松地创建测试桩和测试替身。sinon 中最强大的特性就是支持测试异步代码。换句话说,sinon 可以帮助我们捕捉异步代码和回调函数,并且能够确保它们正确地工作。

安装 sinon

首先你需要安装 sinon。你可以通过 npm 安装:

安装完成之后,在测试文件中引入 sinon。

如何测试异步代码

废话不多说,让我们看一下如何在 Chai 中使用 sinon 测试异步代码。

假设我们有一个异步函数 foo,它在 100ms 后返回结果。我们使用 setTimeout() 模拟这个异步函数。

现在我们需要写一个测试用例来测试它是否能够正确返回结果。我们可以使用 sinon 的 stub() 方法来创建一个模拟函数。然后我们可以使用 callsFake() 方法指定模拟函数的实现。

-- -------------------- ---- -------
-------------- ----- -- -- -
  -------------- ------ -- -
    ----- -------- - -------------
    --------------------------- -- -
      ----------------------------------
      ------- -- ----
    ---
    --------------
  ---
---

在上述代码中,我们使用了 Chai 断言库中的 expect() 方法来确认函数的返回结果,确保它是我们所期望的。然后,在模拟函数的实现中,我们使用了 done() 方法来告诉测试框架测试已经结束。注意,我们需要将它作为一个参数传递给测试函数,以确保测试结束之前等待异步操作的完成。

如何测试 AJAX 调用

以上述例子为基础,我们可以扩展测试异步操作的范围。在前端开发中,AJAX 调用是非常常见的异步操作。我们可以使用 sinon 捕捉这些代码,并且确保它们工作正常。

假设我们有一个函数 fetchData(),它使用 jQuery 来发送 AJAX 请求,并且带有回调函数来处理结果。我们可以使用 sinon.stub() 去捕捉这个回调函数,然后在测试用例中检查结果。

-- -------------------- ---- -------
-------- -------------- --------- -
  --------
    ---- ----
    -------- -------- ------ -
      ---------------
    --
  ---
-

------------------- ---- -- -- -
  ---------- ---- ---- ------ -- -
    ------------- --------------------------- -
      ----- --------
      ---- ---
    ---

    ----------------------------------------- ------ -- -
      ----------------------------
        ----- --------
        ---- ---
      ---
      -----------------
      -------
    ---
  ---
---

在上述代码中,我们使用 yieldsTo() 方法来指定模拟函数对回调函数的调用。然后我们可以像以前一样使用 expect() 方法来检查结果。最后,我们在测试完成之后使用 $.ajax.restore() 方法还原原始的 AJAX 函数。

如何测试 Promise

在 Node.js 8.0.0 中,支持了 async/await 协议以及 Promise 类,在前端开发中逐渐被广泛使用。在测试中也非常普遍。对于测试异步 Api/Vue/React/微服务等不同框架体系,都是有备无患,Sinon提供了丰富的特性测试异步函数和异步代码。

-- -------------------- ---- -------
-------- ----------------- -
  ------ --- ----------------- -- -
    ------------- -- -
      ---------
        ----- --------
        ---- ---
      ---
    -- -----
  ---
-

----------------- ------ -- -- -
  ---------- ------- ---- -- -- -
    ----- -------- - -
      ----- --------
      ---- ---
    --
    ------------------ ----------------------------------
      ----- -- -- --------------------------
    ----

    ------ ------------------------------------------------------- -- -
      ------------------------------------
    ------------- -- -
      -----------------------
    ---
  ---
---

我们使用 sinon.stub() 捕捉了 global.fetch,并使用 Promise 解析返回值返回假数据。 然后,我们通过一个具有 Promise.thenPromise.finally 的回调链验证了返回值,finally 用于还原捕捉的 fetch 的原有状态。

总结

本文介绍了如何在 Chai 中使用 sinon 测试异步操作。sinon 的强大特性可以捕捉异步代码,并且确保它们正确工作。在测试 AJAX 调用和 Promise 时,使用 sinon.stub() 可以捕捉回调函数,并根据测试用例打桩。如果您还没有开始测试异步代码,那么现在就开始吧,使用 sinon 帮助您更轻松地完成测试任务。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/654355f47d4982a6ebd08071

纠错
反馈