TanStack / TanStack/router

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

Open
#6,320 4 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the StackBlitz reproduction and the renderRoute helper, comparing the redirect test with the about-page test. Verify the behavior when RouterProvider handles the redirect and identify whether the warning comes from TanStack Router or the test environment; done means the redirect test still passes without the act warning.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, testing
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.