Is there way to start machine/service without hooks in React?

[baeharam]

Situation

1. I'm passing service variable from component A to component B.
2. Component B which received service to be tested using Jest and React testing library.
3. For this, I have to pass service variable in test file.
4. But, test is failed because passed service in test file doesn't work correctly as expected.

From this problem, I thought another way.

1. Start machine in component B and dispatch to component A using Context API.
2. In component A, I can start service, but it needs initial value for initial state.
3. I setup null as initial value for service, but when I use useService hook, it couldn't be null.
4. Therefore, I tried to start service when this variable is not null, but hook can only be used in top-level as you know.

Consequently, I have to start service without any hooks , like just function call. How can I solve it? Or is there other way?

[rjdestigter]

Are you starting the service before passing it to component B in your test? Maybe you can post a code snippet of your test?

[davidkpiano]

✏️ Please create a CodeSandbox (React template) reproduction of this. Thanks!

[baeharam]

@rjdestigter @davidkpiano

I solved it by starting service, but I have a question. In docs of useMachine hook, it says like this.

interprets the given machine and starts a service that runs for the lifetime of the component.

Then, why I have to start service manually even it starts service? Thx

[rjdestigter]

Because you are not using useMachine in the test.

[baeharam]

No, I'm using useMachine in test like implementation code. But it's failed.

[rjdestigter]

#1533 (comment)