在 Jest 测试中使用 TestScheduler 实现 RxJS 测试-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们常常需要对一个 web 页面或单元组件进行测试，以验证它们的正确性、性能和健壮性。而在复杂业务场景下，很多时候我们的代码中会涉及耗时、异步、交互等多种因素，使得测试变得相对困难。此时，可以通过使用 RxJS 库来处理异步、响应式数据流等问题，并使用 Jest 提供的 TestScheduler 处理时间流，实现对 RxJS 代码的自动化测试。

TestScheduler 简介

TestScheduler 是 RxJS 库中提供的一个测试工具，它模拟了时间流，可以让我们快速、可靠地测试 RxJS 代码逻辑，避免在测试过程中依赖、等待真实时钟时间而产生的不稳定性和范式上的困扰。具体来说，TestScheduler 提供了以下功能：

模拟时间流：使用 TestScheduler.create() 方法创建测试对象，并通过 .cold(), .hot(), time(), expectObservable() 等方法模拟冷/热 Observable、时间间隔和期望的输出。
断言 Observable：使用 .expectObservable() 方法比对 Observable 的预期输出结果，并支持 Operator 标记匹配符号等功能。
断言订阅顺序：使用 .expectSubscriptions() 方法比对 Subscription 的预期订阅顺序。

RxJS 测试实例

下面通过一个简单的 RxJS 代码实例来演示如何使用 TestScheduler 在 Jest 中进行自动化测试。

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

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

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

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

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

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

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

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

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

在该测试示例中，我们使用 TestScheduler 和 Jest 的测试框架，分别进行了两项测试：

should unsubscribe after 10 seconds：使用 cold() 方法模拟了一个依次发出了 7 个值的冷 Observable，然后使用 takeUntil() 和 timer() 操作符分别设置了当满足条件或超时时间达到后停止 Observable 流发射。最后使用 .toBe() 方法验证输出。
should emit once every second：使用 interval() 和 takeUntil() 操作符分别设置了间隔发射时间和停止 Observable 流发射的条件，最后使用 .toBe() 方法验证输出。

RxJS 测试总结

RxJS 实现了把异步代码看做数据流、用 Observer 监听数据流变化的编程范式，非常适合处理复杂的业务数据流场景。
TestScheduler 提供了模拟时间流的功能，使得我们可以在无效依赖真实时间的情况下，模拟任何时间序列进行测试，并且提供了方便的断言方法来验证输出结果。
在实际应用中，我们可以通过结合 RxJS、TestScheduler 和 Jest 等技术来快速构建自动化测试，并提高整体的代码质量和可维护性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65921c2deb4cecbf2d7029bb