,
})
- return render()
+ render()
+
+ // navigate to /posts
+ const link = await waitFor(() => screen.getByRole('link', { name: 'Posts' }))
+ const before = select.mock.calls.length
+ act(() => link.click())
+ const title = await waitFor(() =>
+ screen.getByRole('heading', { name: /Title$/ }),
+ ) // matches /posts and /other
+ expect(title).toBeInTheDocument()
+ const after = select.mock.calls.length
+
+ return after - before
}
-describe('Store updates during navigation', () => {
- it("isn't called *too many* times", async () => {
- const select = vi.fn()
+describe("Store doesn't update *too many* times during navigation", () => {
+ test('async loader, async beforeLoad, pendingMs', async () => {
+ const updates = await setupAndRun({
+ beforeLoad: () =>
+ new Promise((resolve) => setTimeout(resolve, 100)),
+ loader: () => new Promise((resolve) => setTimeout(resolve, 100)),
+ defaultPendingMs: 100,
+ defaultPendingMinMs: 300,
+ })
- setup({
- RootComponent: () => {
- useRouterState({ select })
- return
+ // This number should be as small as possible to minimize the amount of work
+ // that needs to be done during a navigation.
+ // Any change that increases this number should be investigated.
+ expect(updates).toBe(19)
+ })
+
+ test('redirection', async () => {
+ const updates = await setupAndRun({
+ beforeLoad: () => {
+ throw redirect({ to: '/other' })
},
})
- // navigate to /posts
- const link = await waitFor(() =>
- screen.getByRole('link', { name: 'Posts' }),
- )
- const before = select.mock.calls.length
- act(() => link.click())
- const title = await waitFor(() => screen.getByText('PostsTitle'))
- expect(title).toBeInTheDocument()
- const after = select.mock.calls.length
-
// This number should be as small as possible to minimize the amount of work
// that needs to be done during a navigation.
// Any change that increases this number should be investigated.
- expect(after - before).toBe(19)
+ expect(updates).toBe(26)
})
})