How to mock custom query hooks from a different package?

[yadielar]

If I have a project that depends on a separate @shared/api package that contains various custom query hooks, what would be the recommended approach to testing components that use those hooks without needing to know too much about the internals of the hook?

For example, suppose I have these two packages and modules:

// @shared/api/
// └─ index.js

import { useQuery } from 'react-query';
import { http } from '../utils';

async function fetchPost(postId) {
  const post = await http.get(`/api/post/${postId}`);
  return post;
}

export function usePost(postId, options) {
  return useQuery(['post', postId], fetchPost, options);
}

// @product/blog/
// └─ components/PostPreview.js

import { usePost } from '@shared/api';

export function PostPreview(postId) {
  const { status, data: post } = usePost(postId, { enabled: true });
  return (
    // more code
    // ...
  );
}

Then in a test for the PostPreview component, I would like to mock the usePost hook without needing to know more than it's public interface: the hook's inputs and outputs.

import React from "react";
import { render, screen, wait } from "@testing-library/react";
import { PostPreview } from './PostPreview';

// jest.mock("@shared/api"); ???

test("Should render a post preview", async () => {
  const post = { id: 1, title: "My post", url: "/1" };

  // Can I mock `usePost` without knowing it's API endpoint path or the name of it's internal query function?

  render(<PostPreview />);

  expect(screen.getByText("Loading...")).toBeInTheDocument();
  await waitFor(() => expect(screen.getByText("My Post")).toBeInTheDocument());
});

Can I mock usePost without knowing it's API endpoint path or the name of it's internal query function?

---

I realize that this may be a challenge of hooks in general, but it is more striking with React Query's hooks because they do so much underneath that just mocking the output would be very limiting. I'm wondering if anybody using RQ has encountered this problem and if there's an obvious solution that I'm not seeing.

[TkDodo]

Here’s my approach at testing react query: https://tkdodo.eu/blog/testing-react-query

[yadielar]

Thank you @TkDodo! Great article!

We already use something similar to Mock Service Worker in our project (Mirage) for development, but we hadn't thought about such a tool as a solution across packages to mock for testing as well. Looking into MSW to compare.

In case it helps someone else, we're planning on doing something like this:

import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import { PostPreview } from "./PostPreview";

// Get our mocks and server for mocking special cases
import { server } from 'test-utils';
import { mockUsePost } from "@shared/api/mocks";

test("Should render a special post preview", async () => {
  const post = { id: 1, title: "My special post", url: "/1" };

  // Only mock server responses in special cases using MSW
  server.use(mockUsePost(200, post));

  render(<PostPreview />);

  expect(screen.getByText("Loading...")).toBeInTheDocument();
  await waitFor(() => expect(screen.getByText("My special post")).toBeInTheDocument());
});

If we get something working, I will share what we come up with here in case it might help somebody else.