在 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 中进行自动化测试。

import { interval, timer } from 'rxjs';
import { takeUntil, takeWhile } from 'rxjs/operators';

describe('RxJS tests', () => {
  let scheduler: TestScheduler;

  beforeEach(() => {
    scheduler = new TestScheduler((actual, expected) => {
      expect(actual).toEqual(expected);
    });
  });

  afterEach(() => {
    scheduler.flush();
  });

  it('should unsubscribe after 10 seconds', () => {
    scheduler.run(({ cold, time, expectObservable }) => {
      const source$ = cold('-a-b-c-d-e-f-g-|');
      const expectedOutput =          '-a-b-c-d-e|';

      const result$ = source$.pipe(
        takeWhile(() => true),
        takeUntil(timer(time('10s')))
      );

      expectObservable(result$).toBe(expectedOutput);
    });
  });

  it('should emit once every second', () => {
    scheduler.run(({ expectObservable, tick }) => {
      const source$ = interval(1000).pipe(
        takeUntil(timer(tick(4000))) // cancel after 4 seconds
      );
      const expectedOutput = '(01234|)';

      expectObservable(source$).toBe(expectedOutput);
    });
  });
});

在该测试示例中，我们使用 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