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