Unit testing of async atoms

[orac]

I'm confused about how to test async atom computation. I have a set of atoms:-

const thingIdAtom = atom<string>();
const thingAtom = atom<Promise<Thing>>();
const derivedAtom = atom<Promise<...>>(async get => {
    const thing = await get(thingAtom);
    return syncFunction(thing);
});

There is no async behaviour in the derivedAtom other than waiting for the thingAtom to resolve. In the product code, thingAtom is set by fetching something based on thingIdAtom, but in my test, I'm setting it to a mocked Thing (no Promise) with useHydrateAtoms. When I use

const { result } = renderHook(() => useAtomValue(derivedAtom), { wrapper: ... });

then result.current is null. If I wrap the renderHook call in await act(...), or I use waitForNextRender, the test times out.

What's the right way (or any working way) to unit-test atom derivations when there is async behaviour? This behaviour of async atoms appearing null on first render, even though the return type doesn't include null, does seem very error-prone.

[dmaskasky]

Async atoms suspend the react component that consumes them. You can try adding Suspense to your wrapper.

[orac]

Adding Suspense to the wrapper doesn't change the behaviour at all. I don't think useAtomValue is suspending at all, I think it's just returning null.

[dmaskasky]

If you switch renderHook to render and set up the component boilerplate, you should see it suspend. I haven't tried with renderHook, but I would be surprised if that test util doesn't work with suspense.

[himself65]

You are using react test utils to test the jotai. but jotai atoms could be ran without react component. from my practice, I would like to use createStore API and test the atom directly. And then integrate into component and do some components test as usual