Testing resolved loadable atoms?

[franky47]

When testing my atom graph, I want to pre-set some async atoms to a resolved value and observe the loadable atoms that wrap them. This is what my test fixture looks like:

test('loadable', () => {
  const store = createStore()
  const asyncAtom = atom(Promise.resolve('resolved'))
  const loadableAtom = loadable(asyncAtom)
  renderHook(() => useAtomValue(loadableAtom), {
    wrapper: props => <Provider {...props} store={store} />
  })
  // Assertion fails, state is 'loading'
  expect(store.get(loadableAtom).state).toBe('hasData')
})

As you can see, the assertion fails as the loadable always starts in in the loading state, even if the source Promise is already resolved. Is there a way to "run" the hooks as it would happen in a React app, so that the loadable switches to the hasData state? I'm not yet familiar with all Testing Library APIs.

Things I've tried, without success:

• Awaiting the promise in the test body
• Using the rerender output from renderHook
• Combination of the two

[dai-shi]

Promise will be evaluated when the atom is first read. So, I think you have to await after the first read.

  expect(store.get(loadableAtom).state).toBe('loading')
  await Promise.resovle() // wait for a microtask
  expect(store.get(loadableAtom).state).toBe('hasData')

Hm, but useAtomValue() has already read the atom.

Would you be able to create a reproduction with StackBlitz?

[franky47]

Sorry, yes here's the reproduction sandbox: https://stackblitz.com/edit/vitest-dev-vitest-4zsena?file=src%2Fjotai-loadable.test.tsx

I added your suggestion, but no luck there too.

[dai-shi]

It looks like we need to wait three microtasks.

https://stackblitz.com/edit/vitest-dev-vitest-et9d99?file=src%2Fjotai-loadable.test.tsx

[franky47]

This worked thanks! However I now had three warnings regarding act:

Warning: An update to TestComponent inside a test was not wrapped in act(...).

This is solved by wrapping the render into an awaited act, which also deals with awaiting all microtasks:

test('awaiting act', async () => {
  const store = createStore();
  const asyncAtom = atom(Promise.resolve('resolved'));
  const loadableAtom = loadable(asyncAtom);
  await act(async () => {
    renderHook(() => useAtomValue(loadableAtom), {
      wrapper: (props: any) => <Provider {...props} store={store} />,
    });
  });
  expect(store.get(loadableAtom).state).toBe('hasData');
});

Sandbox: https://stackblitz.com/edit/vitest-dev-vitest-eyoee4?file=src%2Fjotai-loadable.test.tsx

Related Kent C. Dodds article: https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning