Xstate-test-cypress NPM

xstate-test-cypress

Utilities for adapting @xstate/test to work more easily with cypress 7+

Usage

Basic usage is as follows, for more complete usage with types refer to /cypress/integration/todo.spec.ts and /cypress/components/* folder for component testing example.

Note that testContext is the object that you pass in to plan.test(...), it has no relation to the context of the machine.

import {
  checkCoverage,
  createCypressMachine,
  createCypressModel,
  simpleExecutePlan
} from 'xstate-test-cypress';

const testMachine = createCypressMachine(
  {
    states: {
      parent: {
        on: {
          SIMPLE: 'other'
        },
        states: {
          child: {
            on: { CASES: 'other' }
          }
        }
      },
      other: {}
    }
  },
  {
    parent: (testContext) => cy.get('something').should('be.visible'),
    'parent.child': (testContext) => {
      cy.get('something').should('have.length', 2);
      // Note that all these functions must return a Chainable
      return cy.get('something-else').should('contain', 'some text');
    }
  }
);

const testModel = createCypressModel(testMachine, {
  SIMPLE: () => cy.get('button').eq(0).click(),
  CASES: {
    cases: [{ value: 'Value one' }, { value: 'Value 2' }],
    exec: (testContext, testCase) => {
      testContext.someCounter += 1;
      return cy.focused().clear().type(`${testCase.value}{enter}`);
    }
  }
});

context('example tests', () => {
  simpleExecutePlan(testModel.getSimplePathPlans(), () => {
    cy.visit('/');
    return { someCounter: 1 };
  });
  checkCoverage(testModel);
});

context('updated tests', () => {
  simpleExecutePlan(
    testModel
      .update(
        { other: () => cy.log('new state check') },
        { SIMPLE: () => cy.log('new event execution') }
      )
      .getSimplePathPlans(),
    () => {
      cy.visit('/');
      return { someCounter: 1 };
    }
  );
  checkCoverage(testModel);
});

Test application is forked from the TodoMVC site.