Testing RxJS observables with Promise – the simplest way

When testing RxJS code, you typically want to verify that your observables emit the expected values in response to certain actions or events. See how you can cover those cases using async/await approach.

December 25, 2023 rxjstesting

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,

    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));


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$);

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

  const nextState = await firstValueFrom(store.tasks$);

firstValueFrom function converts observable to promise by returning the first emitted value.

Do you like the content?

Your support helps me continue my work. Please consider making a donation.

Donations are accepted through PayPal or Stripe. You do not need a account to donate. All major credit cards are accepted.

Leave a comment