Why is my custom hook with Jotai atom returning undefined in tests?

[ArthurGuez]

Hello there,

I'm facing an issue with testing a custom hook that relies on an atomWithStorage initialized with a promise.
My hook useConfig returns undefined in the tests, even though I've mocked the function it relies on.
Here's the setup and the test that is failing:

export const configAtom = atomWithStorage<Promise<Config | null>>('config', getLocalConfig());

export default function useConfig() {
  return useAtomValue(configAtom);
}

vi.mock('@/services/config', () => ({
  getLocalConfig: vi.fn(),
}));

describe('useConfig', () => {
  it('should return the configuration when resolved', async () => {
    vi.mocked(getLocalConfig).mockResolvedValue(MOCK_CONFIG);

    const { result } = renderHook(() => useConfig());

    await waitFor(() => expect(result.current).toEqual(MOCK_CONFIG));
  });
});

[dai-shi]

Maybe, you are creating the configAtom before you mock the function.

export const configAtom = atomWithStorage<Promise<Config | null>>('config', getLocalConfig());
// is equal to
const initialConfig = getLocalConfing(); // runs before `mockResolvedValue()`
export const configAtom = atomWithStorage<Promise<Config | null>>('config', initialConfig);

[ArthurGuez]

Not sure I understand what I could do differently 😅

Is it OK to use a Promise directly in the atom definition?

[rothsandro]

It's not related to promises and would happen with sync functions as well. As dai-shi explained, at the time you are calling mockResolvedValue() the config function has already been called and will therefore not be mocked anymore:

1. You call vi.mock('@/services/config') with an empty mock function
2. Vitest imports the module that contains the atom
3. Importing the module will call getLocalConfig() to get the initial value (that is passed to atomWithStorage()). This calls the empty mock that you provided
4. Vitest runs your test
5. You call mockResolvedValue() which is now already too late, the function has already been called

---

If you don't need different mocks per test, you can simple define the value when creating the mock:

vi.mock("./services/get-local-config", () => ({
  getLocalConfig: vi.fn().mockResolvedValue(MOCK_CONFIG),
}));

If you need need different mocks per test you could use vi.resetModules() in combination with dynamic imports.

  it("should work", async () => {
    vi.mocked(getLocalConfig).mockResolvedValue(MOCK_CONFIG);

    const { default: useConfig } = await import("./use-config");

    // ...

    vi.resetModules();
  });

Vitest can't reset top-level imports, so make sure that the file containing the atom isn't imported (directly or indirectly, e.g. via barrel file) in a top-level import but only by the dynamic import in your test. Maybe also pay attention to performance, I don't know if resetting modules is time consuming.

If these approaches don't work for you, there are likely alternatives. Maybe find a way to delay the getLocalConfig() call. Or use the Jotai store to set the default value in your test before calling the atom hook.

[ArthurGuez]

@rothsandro Thank you very much. Both approaches worked for me 🙏