An update to Transitioner inside a test was not wrapped in act(...)
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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