Unit testing atomWithQuery

[kevinakahoshi]

What is the recommended approach to unit testing atomWithQuery?

For example, let's say that I have an atom like the one below:

export type User = {
  id: string;
  name: string;
  email: string;
  isVerified: boolean;
  status: 'active' | 'inactive';
  avatar: {
    src: string | null;
  }
};


export const userAtom = atomWithQuery(() => ({
  queryKey: ['api', 'user'],
  queryFn: async ({ signal }) => {
    const { data } = await axios.get<User>('/api/user', { signal });
    return data;
  }
}));

Then, I use it in a component like this:

export const UserInfo = () => {
  const { data, isLoading, isError } = useAtomValue(userAtom);

  if (isLoading) return <UserSkeleton />;
  if (isError) return null;
  return (
    <div>
      <img src={data.avatar.src} />
      <p>{data.name}</p>
    </div>
  );
};

Additionally, let's say I have a custom hook that uses the value for some operation:

export const useUserInfo = () => {
  const { data, isLoading, isError } = useAtomValue(userAtom);

  // Hook business logic

  return {
    info
  }
};

How would I go about testing the component and the custom hook with this read-only atomWithQuery?

I tried to initially hydrate the atoms in the test suite but it did not seem to work. After that, I tried to create a store for the test suite where I set the atom value, but I got errors while running the tests.

I was able to get the tests to pass by changing the atom to a writeable atom like this:

const updateUserAtom = atom(null);

const readOnlyUserAtom = atomWithQuery(() => ({
  queryKey: ['api', 'user'],
  queryFn: async ({ signal }) => {
    const { data } = await axios.get<User>('/api/user', { signal });
    return data;
  }
}));

export const userAtom = atom(
  (get) => get(updateUserAtom) || get(readOnlyUserAtom),
  (get, set, update) => set(updateUserAtom, update)
);

Then in my tests I just set the atom to a mock value. This seems like an anti-pattern though, and would not scale well since I'd have to do this for every atom in the application. Not to mention that there are additional properties/methods on the result object returned from Tanstack. Just doesn't seem like a good solution, even though it technically works for testing.

Are there examples of unit tests for atomWithQuery that I can reference?

[rothsandro]

I'm not sure if or how you can set the atom value for queries in tests, but I wouldn't recommend it anyway. You get less confidence that your code is actually working if you mock the atom value and skip the query.

I would recommend to actually run the query in your tests and instead mock the API endpoint, either via axios (e.g. axios mock adapter) or a library like MSW.

Alternatively, you can set the query data via query client. Create the query client in your tests, configure a higher default stale time and call queryClient.setQueryData(...) before rendering your component. This will use the existing, non-stale query data from the cache and not trigger a request.