How to test loading state from useNavigation() hook in v6?

[olga-urentseva]

Hi! Have a good day!
I'm trying to test my component, that should show <Spinner> when the state from useNavigation() is "loading". But I don't understand how to emulate this situation.

Example:

// index.test.tsx

const loader = vi.fn(
        () =>
          new Promise(() => {})
      );

const router = createBrowserRouter([
      {
        path: "/",
        element: <MainPage />,
        loader: loader,
        errorElement: <ErrorPage />,
      },
    ]);

.......

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

// index.tsx

function MainPage() {
  
  const { state } = useNavigation();

  console.log(state); // idle -> loading -> idle

  return (
    <Layout>
      {state === "loading" ? (
        <Spinner />
      ) : <SomethingElseComponent>
      )}
    </Layout>
  );
}

export default MainPage;

... I see that state === "idle" at first, only then it's loading and then idle again, so my <Spinner> that exists only when state === "loading" can not be catched and tested. And that’s understandable in this case, but I don't know how to catch the moment when the state === "loading". I'm trying to find the solution for a week already...

I'd be super happy for your answers! 🥲