How to test a custom hook that uses data API hooks inside?

[pablomarquezcabify]

I'm trying to test a React custom hook that uses useLoaderData hook inside of it. Something like:

export const useCustomHook = () => {
  const { someData } = useLoaderData<typeof loader>();

  return {
    someData
  }
}

How am I supposed to test this without mocking useLoaderData?

For components, I've managed to use createMemoryRouter to provide loader's data inside hydrationData option and rendering RouterProvider. Something like:

const router = createMemoryRouter(
    [
      {
        id: 'main',
        path: '/',
        element: testedReactElement,
      },
    ],
    {
      initialEntries: ['/'],
      hydrationData: {
        actionData: { main: actionData },
        loaderData: { main: loaderData },
      },
    },
  );

render(<RouterProvider router={router} />);

But that just doesn't work with hooks:

// result.current === undefined
const { result } = renderHook(() => useCustomHook(), {
  wrapper: ({ children }) => {
      const actionData = {};
      const loaderData = {};
      const errorData = {};
      const router = createMemoryRouter(
        [
          {
            id: 'main',
            path: '/',
            element: children,
          },
        ],
        {
          initialEntries: ['/'],
          hydrationData: {
            actionData: { main: actionData },
            loaderData: { main: loaderData },
          },
        },
      );

      return <RouterProvider router={router} />;
    }, 
 });

It would be nice to use MemoryRouter there, but it does not support data API. So, any suggestions to sort this out without mocking useLoaderData?

EDIT: nevermind, I made it work. The problem was I was also passing an empty object to hydrationData.errors and it was causing the router not to render the right thing.