Testing RxJS observables with Promise – the simplest way

Testing a RxJS stream with promise

When a observable emits many values writing a testing scenario can be difficult. One of the official solution is to use marble diagrams but is may be overkill for simple scenarios. Better idea can be transforming a RxJS stream into promise and using async/await keywords.

import { interval, take, toArray, firstValueFrom } from "rxjs";

it("should return first tree values", async () => {
  const interval$ = interval(1_000);
  const firstThreeValues = await firstValueFrom(interval$.pipe(take(3), toArray()));
  expect(firstThreeValues).toEqual([0, 1, 2]);
});

Read case scenario

Imagine a situation where you have written a store to manage tasks in your application.

interface Task {
  id: number;
  description: string;
  completed: boolean;
}

export class TaskStore {
  private static lastId = 0;

  private tasks$$ = new BehaviorSubject<Task[]>([]);
  tasks$ = this.tasks$$.asObservable();
  completedTasks$ = this.tasks$$.pipe(map((toDos) => toDos.filter((task) => task.completed)));

  addTask(description: string): Task {
    const task: Task = {
      id: ++TaskStore.lastId,
      completed: false,
      description,
    };

    this.tasks$$.next([task, ...this.tasks$$.getValue()]);

    return task;
  }

  completeTask(id: number): void {
    const tasks = this.tasks$$.getValue();
    const newTasks = tasks.map((task) => (task.id === id ? { ...task, completed: true } : task));

    this.tasks$$.next(newTasks);
  }
}

Let us write a test where we will try to check if our class correctly stores added tasks. To do this we will use promises.

it("should add two tasks", async () => {
  const store = new TaskStore();

  const initialState = await firstValueFrom(store.tasks$);
  expect(initialState.length).toEqual(0);

  store.addTask("Buy some milk");
  store.addTask("Buy two eggs");

  const nextState = await firstValueFrom(store.tasks$);
  expect(nextState.length).toEqual(2);
});