#Testing invoked machines without the parent machine

1 messages · Page 1 of 1 (latest)

sterile island
#

Hello, I have a question about testing methodologies which I have outlined below.

I have a multi step form that is controlled by a parent machine which spawns a number of child machines for different sub sections of the form. Each of the invoked child machines controls views of varying complexity. Once the invoked form is complete, it reports the data back to the parent.

For each of these sub workflows, the actor is passed down as a prop and then the service is used via the useActor hook. As below.

  registrationDataMachine: SpawnedActorRef<RegistrationEvents>;
  countryId: number;
  onExit: () => void;
  onBack: () => void;
};

function RegistrationForm({
  registrationDataMachine,
  countryId,
  onExit,
}: RegistrationFormProps) {
  const [actorState, send] = useActor(registrationDataMachine);


  return (
    <div>{actorState.current.value}</div>
  )
};```

When testing this component using plain old jest and testing library, is there any way I can pass the child machine without having to fire up the parent and access it from a ref in the context or a child of the parent state? I just want to create the `registrationDataMachine` without having to worry about the parent. This will allow me to test the submachine and view in isolation, without having to worry about it in the context of the parent form. I have created a really hacky way of doing this in the simplified version of my problem here https://codesandbox.io/s/wild-shape-mioxtm?file=/src/child.spec.tsx, but it feels dirty. 

Any help would be greatly appreciated. Please also feel free to tell me to roll up my sleeves and get into the model based testing.

Thanks in advance

wild-shape-mioxtm by george.hattrell using @babel/preset-env, @babel/preset-react, @babel/preset-typescript, @testing-library/jest-dom, @testing-library/react, @testing-library/user-event, @types/jest, @xstate/react, babel-jest

quiet gate
#

I might not be following. Looking at the codesandbox, the child.spec.tsx test is not using the parent machine. Thats what you want, right?

sterile island
#

It is indeed, it just feels like a nasty way of doing it, and I wondered if there was a neater way to isolate child machines and the views they serve.

quiet gate
#

This post caught my attention bc I’ve been working on a similar multi step form thing; the way the tests are set up now looks decent to me, but I’m curious what others think too.