Testing data cached by useQuery.

[abelta]

I'm going crazy finding a solution for this one even though I would guess it's a pretty common use.
I have a custom react-query hook that accesses the currently logged in user in my application like this:

// useCurrentUser.js
import { useQuery } from 'react-query'

export default () => {
  const { data } = useQuery('login')
  return data
}

And then I try to test it mocking the entire module react-query first and then the implementation of useQuery so I can control what it returns (can't think of a more standard way than doing just that).

//useCurrentUser.test.js
import { renderHook } from '@testing-library/react-hooks'
import { useQuery } from 'react-query'
import { useCurrentUser } from 'hooks'

jest.mock('react-query', () => ({
  useQuery: () => jest.fn(),
}))

describe('useCurrentUser', () => {

  it('returns current user', () => {
    const user = { id: 1, name: 'Ana' }
    useQuery.mockImplementation(() => user)
    const { result } = renderHook(() => useCurrentUser())
    expect(result).toBe(user)
  })
})

However it seems like this is not the right way to mock an NPM module because I get an error message: _reactQuery.useQuery.mockImplementation is not a function.

I am asking because it seems to me like this should be a pretty basic functionality that most users would like to test but is is not covered in the examples in the documentation. Any ideas?

[TkDodo]

I think you should just mock the actual network request or fetch-function that is happening, not the whole react-query module.

Here is how you can test a custom hook with react-query:

import * as React from "react";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import { renderHook } from "@testing-library/react-hooks";
export function useCustomHook() {
  return useQuery("customHook", () => "Hello");
}

const createWrapper = () => {
  const queryClient = new QueryClient();
  const wrapper = ({ children }) => (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );

  return wrapper;
};

test("should work", async () => {
  const { result, waitFor } = renderHook(() => useCustomHook(), {
    wrapper: createWrapper()
  });

  await waitFor(() => result.current.isSuccess);

  expect(result.current.data).toEqual("Hello");
});

[abelta]

The system I have set up actually does work, it testing it (barely a three line hook) that I can't find any example of.

// useCurrentUser.js
import { useQuery } from 'react-query'

export default () => {
  const { data } = useQuery('login')
  return data
}

[TkDodo]

do you have a default query function setup? because per default, this will trigger background refetches when the component mounts, on window re-focus etc ...

if you don't have an actual async function that makes a request, you are kinda abusing react-query for synchronous state (just reading from a js Map basically). Sure, it works, but it's not what react-query is intended for :)

[abelta]

I'm willing to admit it's a bad use of the library but still it would be cool to be able to test cache access.

[TkDodo]

okay, fair enough :)

I would say that this should still work:

you can also fill the cache for testing purpose via queryClient.setQueryData, similar to what you're probably doing in the mutation.

I'd do that in createWrapper:

const createWrapper = () => {
  const queryClient = new QueryClient();
+  queryClient.setQueryData('login', mockLoginObject)
  const wrapper = ({ children }) => (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );

  return wrapper;
};

[abelta]

Finally managed to test it while maintaining my initial structure just by accounting for the format useQuery uses when returning a result (inside a "data" key).
This is what I was looking for:

import { renderHook } from '@testing-library/react-hooks'
import { useCurrentUser } from 'hooks'

jest.mock('react-query', () => ({
  useQuery: () => ({ data: { id: 1, name: 'Ana' } }),
}))

describe('useCurrentUser', () => {
  describe('user is logged in', () => {
    it('returns current user', () => {
      const { result } = renderHook(() => useCurrentUser())
      expect(result.current).toEqual({ id: 1, name: 'Ana' })
    })
  })
})