Version: XState v5

Testing

Testing logic

Testing actor logic is important for ensuring that the logic is correct and that it behaves as expected. You can test your state machines and actors using various testing libraries and tools. You should follow the Arrange, Act, Assert pattern when writing tests for your state machines and actors:

Arrange - set up the test by creating the actor logics (such as a state machine) and the actors from the actor logics.
Act - send event(s) to the actor(s).
Assert - assert that the actor(s) reached their expected state(s) and/or executed the expected side effects.

import { setup, createActor } from 'xstate';
import { test, expect } from 'vitest';

test('some actor', async () => {
  const notifiedMessages: string[] = [];

  // 1. Arrange
  const machine = setup({
    actions: {
      notify: (_, params) => {
        notifiedMessages.push(params.message);
      },
    },
  }).createMachine({
    initial: 'inactive',
    states: {
      inactive: {
        on: { toggle: { target: 'active' } },
      },
      active: {
        entry: { type: 'notify', params: { message: 'Active!' } },
        on: { toggle: { target: 'inactive' } },
      },
    },
  });

  const actor = createActor(machine);

  // 2. Act
  actor.start();
  actor.send({ type: 'toggle' }); // => should be in 'active' state
  actor.send({ type: 'toggle' }); // => should be in 'inactive' state
  actor.send({ type: 'toggle' }); // => should be in 'active' state

  // 3. Assert
  expect(actor.getSnapshot().value).toBe('active');
  expect(notifiedMessages).toEqual(['Active!', 'Active!']);
});

Testing actors

Coming soon

Mocking effects

Coming soon

Using `@xstate/test`

Coming soon

Testing logic​

Testing actors​

Mocking effects​

Using @xstate/test​

Testing logic

Testing actors

Mocking effects

Using `@xstate/test`