Skip to content

An update to Transitioner inside a test was not wrapped in act(...) #6320

@kimsagro1

Description

@kimsagro1

Which project does this relate to?

Router

Describe the bug

I have a route that throws a redirect

import { createFileRoute, redirect } from '@tanstack/react-router';

export const Route = createFileRoute('/restricted')({
  beforeLoad: () => {
    throw redirect({ to: '/' });
  },
  component: RouteComponent,
});

function RouteComponent() {
  return <div>Hello "/restricted"!</div>;
}

And then testing that the redirect occurs using vitest browser mode

test('restricted page redirects', async () => {
  const { router } = await renderRoute('/restricted');
  expect(router.history.location.pathname).toBe('/');
});

async function renderRoute(path: keyof FileRoutesByFullPath) {
  const memoryHistory = createMemoryHistory({
    initialEntries: [path],
  });

  const router = createRouter({
    routeTree,
    defaultPreloadStaleTime: 0,
    defaultPendingMinMs: 0,
    history: memoryHistory,
  });

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

  return {
    ...result,
    router,
  };
}

The test succeeds but logs the following to the console

An update to Transitioner inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://react.dev/link/wrap-tests-with-act

This only happens when the route throws a redirect, if I test another route without the redirect, then the test passes without any console logs

test('about page renders', async () => {
  await renderRoute('/about');
  await expect.element(page.getByText('Hello from About!')).toBeVisible();
});

I have also tried wrapping the test codes in an act and various combination of wrapping the code in waitUntil etc, but without success.

I have included a stackblitz that reproduced the issue.

Your Example Website or App

https://stackblitz.com/edit/vitejs-vite-o3senmym

Steps to Reproduce the Bug or Issue

Launch the example stackblitz, you will see the logs in the terminal

Expected behavior

The tests passing without the act warnings

Screenshots or Videos

No response

Platform

See example stackblitz

Additional context

I'm not exactly sure whether the issue lies with tanstack router or vitest

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions