Does @xstate/test support xstate V5?

[iliasbhal]

👋 Hey Community!

I was starting a fresh project, so naturally I'm using xstate and nonetheless the V5.
I didn't have luck generating tests using @xstate/test.
I started by recreating the example in the docs but it didn't work 🥲

 const toggleMachine = x.createMachine({
    id: "toggle",
    initial: "inactive",
    states: {
      inactive: {
        on: {
          TOGGLE: "active",
        },
        meta: {
          test: async () => {
            console.log("TEST INACTIVE");
          },
        },
      },
      active: {
        on: {
          TOGGLE: "inactive",
        },
        meta: {
          test: async () => {
            console.log("TEST ACTIVE");
          },
        },
      },
    },
  });

  const toggleModel = xt.createModel<{}>(toggleMachine).withEvents({
    TOGGLE: {
      exec: async () => {
        // await page.click('input');
      },
    },
  });

  const testPlans = toggleModel.getShortestPathPlans();
  testPlans.forEach((plan) => {
    describe(plan.description, () => {
      plan.paths.forEach((path) => {
        it(path.description, async () => {
          await path.test({});
        });
      });
    });
  });

Results in:

[davidkpiano]

Hey! Have you tried @xstate/test@beta?

[cbishop-fv]

I will try to get it to the finish line next week 🤞

Looking at the changelog I belive this is still in beta? We are also using and loving xstate5 and would love to test with a stable version. Thanks!

[davidkpiano]

Looking at the changelog I belive this is still in beta? We are also using and loving xstate5 and would love to test with a stable version. Thanks!

@cbishop-fv The plan is to release a major version of @xstate/graph, which includes everything from @xstate/test. It's being consolidated into one package since they are closely related, and I want to emphasize that @xstate/test is not for testing XState machines, it's for using XState machines to test anything.

[zara-khaliq]

The link posted above is private. Are there any example docs to see how I can use xstate/test with version 5. Having docs using react native and react resting library would be great!

[zara-khaliq]

I created a test.tsx file with the following code however I'm gaving problems running the test. jest doesn't seem to recognize the xstate/test import. Is this how you're meant to test the machine.

import {render, screen} from '@testing-library/react-native';
import {createModel} from '@xstate/test';

import {LoginScreen} from '../../LoginScreen';
import {LoginScreenMachine} from '.';

import {WahedTheme} from '~/WahedTheme';

const LoginMachineModel = createModel<any>(LoginScreenMachine);

const testPlans = LoginMachineModel.getShortestPaths();
describe('Component', () => {
  testPlans.forEach((path) => {
    it.concurrent(path.description, async () => {
      render(
        <WahedTheme>
          <LoginScreen />
        </WahedTheme>
      );
      await path.test({
        states: {
          fetchingPreviousLoginDetails: async () => {
            // not sure how UI will look like in this state
          },
          idle: async () => {
            await screen.findByText('Login');
          },
          loggingIn: async () => {
            await screen.getByRole('progressbar');
          },
          onboarding: async () => {
            // should expect this to not there
            await screen.findByText('Login');
          }
        },
        events: {
          PRESSED_LOG_IN: async () => {
            fireEvent.press(await screen.findByText('Login'));
          },
          LEGACY_USA_USER_LOGGED_IN: async () => {
            fireEvent.press(await screen.findByText('Login'));
          },
          CHANGE_EMAIL: async () => {
            fireEvent.changeText(
              await screen.findByTestId('input-email'),
              ' [email protected]'
            );
          },
          CHANGE_PASSWORD: async () => {
            fireEvent.changeText(
              await screen.findByTestId('input-password'),
              'password'
            );
          }
        }
      });
    });
  });
});

[pkelly-rh]

zara-khaliq
The api is changed. use createTestModel instead of createModel
something like this:
import { createTestModel } from "@xstate/test";