test(nextjs): Add tests for useInternalNavFun navigation promise resolution

.changeset/add-navigation-promise-tests.md

@@ -0,0 +1,2 @@
+---
+---

integration/tests/cache-components.test.ts

@@ -323,5 +323,61 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes], withPattern:
  const userId = await userIdElement.textContent();
  expect(userId).toMatch(/^user_/);
  });
+
+ test('sign out completes and navigation promise resolves', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Sign in
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.expect.toBeSignedIn();
+
+ // Navigate to a non-root page to ensure post-sign-out navigation is a real route change
+ await u.page.goToRelative('/auth-server-component');
+ await expect(u.page.getByText('auth() in Server Component')).toBeVisible();
+
+ // Sign out by explicitly awaiting the full signOut() promise.
+ // Internally, signOut() calls: onBeforeSetActive (cache invalidation) →
+ // session removal → navigate(redirectUrl) via routerPush → useInternalNavFun →
+ // startTransition(() => router.push(to)).
+ // The navigate() call awaits the promise from useInternalNavFun.
+ // If isPending doesn't cycle (the concern from removing usePathname in #7989),
+ // the navigation promise hangs and this evaluate call times out.
+ await page.evaluate(async () => {
+ await window.Clerk.signOut();
+ });
+
+ await u.po.expect.toBeSignedOut();
+ });
+
+ test('protected route redirects to sign-in after sign out', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Sign in and access protected route
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/protected');
+ await expect(u.page.getByText('Protected Route')).toBeVisible();
+
+ // Sign out
+ await page.evaluate(async () => {
+ await window.Clerk.signOut();
+ });
+
+ await u.po.expect.toBeSignedOut();
+
+ // Try to access protected route again — should redirect to sign-in
+ // This verifies cache invalidation worked correctly alongside navigation
+ await u.page.goToRelative('/protected');
+ await expect(page).toHaveURL(/sign-in/);
+ });
  },
 );

packages/nextjs/src/app-router/client/__tests__/useInternalNavFun.test.tsx

@@ -99,4 +99,99 @@ describe('useInternalNavFun', () => {
  expect(routerNav).toHaveBeenCalledTimes(2);
  });
  });
+
+ it('resolves a single navigation promise without usePathname', async () => {
+ const routerNav = vi.fn();
+ render(<Harness routerNav={routerNav} />);
+
+ let promise!: Promise<void>;
+ act(() => {
+ promise = navigate('/dashboard');
+ });
+
+ await waitFor(() => {
+ expect(routerNav).toHaveBeenCalledWith('/dashboard');
+ });
+
+ // Promise resolves via isPending cycling alone — no usePathname needed
+ await expect(promise).resolves.toBeUndefined();
+ });
+
+ it('flushes pre-existing window buffer on mount', async () => {
+ const routerNav = vi.fn();
+
+ // Simulate promises left in the window buffer from a previous component instance
+ // (e.g., ClerkProvider unmounted during navigation — the core scenario from #2899)
+ let resolved1 = false;
+ let resolved2 = false;
+ window.__clerk_internal_navigations = {
+ push: {
+ promisesBuffer: [
+ () => {
+ resolved1 = true;
+ },
+ () => {
+ resolved2 = true;
+ },
+ ],
+ },
+ } as unknown as typeof window.__clerk_internal_navigations;
+
+ render(<Harness routerNav={routerNav} />);
+
+ // The mount effect should flush the pre-existing buffer
+ await waitFor(() => {
+ expect(resolved1).toBe(true);
+ expect(resolved2).toBe(true);
+ });
+ });
+
+ it('flushes pending promises on unmount', async () => {
+ const routerNav = vi.fn();
+ const { unmount } = render(<Harness routerNav={routerNav} />);
+
+ // Manually add resolvers to the buffer to simulate pending navigations
+ let resolved = false;
+ const nav = window.__clerk_internal_navigations.push;
+ nav.promisesBuffer = [
+ () => {
+ resolved = true;
+ },
+ ];
+
+ unmount();
+
+ // The useEffect cleanup should have flushed the promise buffer
+ expect(resolved).toBe(true);
+ });
+
+ it('uses history pushState for internal navigations', async () => {
+ const routerNav = vi.fn();
+ const mockWindowNav = vi.fn();
+
+ let internalNavigate: NavigationFunction | undefined;
+ const InternalHarness = () => {
+ internalNavigate = useInternalNavFun({
+ windowNav: mockWindowNav as typeof window.history.pushState,
+ routerNav: routerNav as any,
+ name: 'push',
+ });
+ return null;
+ };
+
+ render(<InternalHarness />);
+
+ act(() => {
+ internalNavigate!('/shallow-path', {
+ __internal_metadata: { navigationType: 'internal' },
+ windowNavigate: vi.fn(),
+ });
+ });
+
+ await waitFor(() => {
+ expect(mockWindowNav).toHaveBeenCalledWith(null, '', '/shallow-path');
+ });
+
+ expect(routerNav).not.toHaveBeenCalled();
+ });
 });

.changeset/add-navigation-promise-tests.md

@@ -0,0 +1,2 @@
+---
+---

integration/tests/cache-components.test.ts

@@ -323,5 +323,61 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes], withPattern:
  const userId = await userIdElement.textContent();
  expect(userId).toMatch(/^user_/);
  });
+
+ test('sign out completes and navigation promise resolves', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Sign in
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.expect.toBeSignedIn();
+
+ // Navigate to a non-root page to ensure post-sign-out navigation is a real route change
+ await u.page.goToRelative('/auth-server-component');
+ await expect(u.page.getByText('auth() in Server Component')).toBeVisible();
+
+ // Sign out by explicitly awaiting the full signOut() promise.
+ // Internally, signOut() calls: onBeforeSetActive (cache invalidation) →
+ // session removal → navigate(redirectUrl) via routerPush → useInternalNavFun →
+ // startTransition(() => router.push(to)).
+ // The navigate() call awaits the promise from useInternalNavFun.
+ // If isPending doesn't cycle (the concern from removing usePathname in #7989),
+ // the navigation promise hangs and this evaluate call times out.
+ await page.evaluate(async () => {
+ await window.Clerk.signOut();
+ });
+
+ await u.po.expect.toBeSignedOut();
+ });
+
+ test('protected route redirects to sign-in after sign out', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Sign in and access protected route
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/protected');
+ await expect(u.page.getByText('Protected Route')).toBeVisible();
+
+ // Sign out
+ await page.evaluate(async () => {
+ await window.Clerk.signOut();
+ });
+
+ await u.po.expect.toBeSignedOut();
+
+ // Try to access protected route again — should redirect to sign-in
+ // This verifies cache invalidation worked correctly alongside navigation
+ await u.page.goToRelative('/protected');
+ await expect(page).toHaveURL(/sign-in/);
+ });
  },
 );

packages/nextjs/src/app-router/client/__tests__/useInternalNavFun.test.tsx

@@ -99,4 +99,99 @@ describe('useInternalNavFun', () => {
  expect(routerNav).toHaveBeenCalledTimes(2);
  });
  });
+
+ it('resolves a single navigation promise without usePathname', async () => {
+ const routerNav = vi.fn();
+ render(<Harness routerNav={routerNav} />);
+
+ let promise!: Promise<void>;
+ act(() => {
+ promise = navigate('/dashboard');
+ });
+
+ await waitFor(() => {
+ expect(routerNav).toHaveBeenCalledWith('/dashboard');
+ });
+
+ // Promise resolves via isPending cycling alone — no usePathname needed
+ await expect(promise).resolves.toBeUndefined();
+ });
+
+ it('flushes pre-existing window buffer on mount', async () => {
+ const routerNav = vi.fn();
+
+ // Simulate promises left in the window buffer from a previous component instance
+ // (e.g., ClerkProvider unmounted during navigation — the core scenario from #2899)
+ let resolved1 = false;
+ let resolved2 = false;
+ window.__clerk_internal_navigations = {
+ push: {
+ promisesBuffer: [
+ () => {
+ resolved1 = true;
+ },
+ () => {
+ resolved2 = true;
+ },
+ ],
+ },
+ } as unknown as typeof window.__clerk_internal_navigations;
+
+ render(<Harness routerNav={routerNav} />);
+
+ // The mount effect should flush the pre-existing buffer
+ await waitFor(() => {
+ expect(resolved1).toBe(true);
+ expect(resolved2).toBe(true);
+ });
+ });
+
+ it('flushes pending promises on unmount', async () => {
+ const routerNav = vi.fn();
+ const { unmount } = render(<Harness routerNav={routerNav} />);
+
+ // Manually add resolvers to the buffer to simulate pending navigations
+ let resolved = false;
+ const nav = window.__clerk_internal_navigations.push;
+ nav.promisesBuffer = [
+ () => {
+ resolved = true;
+ },
+ ];
+
+ unmount();
+
+ // The useEffect cleanup should have flushed the promise buffer
+ expect(resolved).toBe(true);
+ });
+
+ it('uses history pushState for internal navigations', async () => {
+ const routerNav = vi.fn();
+ const mockWindowNav = vi.fn();
+
+ let internalNavigate: NavigationFunction | undefined;
+ const InternalHarness = () => {
+ internalNavigate = useInternalNavFun({
+ windowNav: mockWindowNav as typeof window.history.pushState,
+ routerNav: routerNav as any,
+ name: 'push',
+ });
+ return null;
+ };
+
+ render(<InternalHarness />);
+
+ act(() => {
+ internalNavigate!('/shallow-path', {
+ __internal_metadata: { navigationType: 'internal' },
+ windowNavigate: vi.fn(),
+ });
+ });
+
+ await waitFor(() => {
+ expect(mockWindowNav).toHaveBeenCalledWith(null, '', '/shallow-path');
+ });
+
+ expect(routerNav).not.toHaveBeenCalled();
+ });
 });

.changeset/add-navigation-promise-tests.md

@@ -0,0 +1,2 @@
+---
+---

integration/tests/cache-components.test.ts

@@ -323,5 +323,61 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes], withPattern:
  const userId = await userIdElement.textContent();
  expect(userId).toMatch(/^user_/);
  });
+
+ test('sign out completes and navigation promise resolves', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Sign in
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.expect.toBeSignedIn();
+
+ // Navigate to a non-root page to ensure post-sign-out navigation is a real route change
+ await u.page.goToRelative('/auth-server-component');
+ await expect(u.page.getByText('auth() in Server Component')).toBeVisible();
+
+ // Sign out by explicitly awaiting the full signOut() promise.
+ // Internally, signOut() calls: onBeforeSetActive (cache invalidation) →
+ // session removal → navigate(redirectUrl) via routerPush → useInternalNavFun →
+ // startTransition(() => router.push(to)).
+ // The navigate() call awaits the promise from useInternalNavFun.
+ // If isPending doesn't cycle (the concern from removing usePathname in #7989),
+ // the navigation promise hangs and this evaluate call times out.
+ await page.evaluate(async () => {
+ await window.Clerk.signOut();
+ });
+
+ await u.po.expect.toBeSignedOut();
+ });
+
+ test('protected route redirects to sign-in after sign out', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Sign in and access protected route
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/protected');
+ await expect(u.page.getByText('Protected Route')).toBeVisible();
+
+ // Sign out
+ await page.evaluate(async () => {
+ await window.Clerk.signOut();
+ });
+
+ await u.po.expect.toBeSignedOut();
+
+ // Try to access protected route again — should redirect to sign-in
+ // This verifies cache invalidation worked correctly alongside navigation
+ await u.page.goToRelative('/protected');
+ await expect(page).toHaveURL(/sign-in/);
+ });
  },
 );

packages/nextjs/src/app-router/client/__tests__/useInternalNavFun.test.tsx

@@ -99,4 +99,99 @@ describe('useInternalNavFun', () => {
  expect(routerNav).toHaveBeenCalledTimes(2);
  });
  });
+
+ it('resolves a single navigation promise without usePathname', async () => {
+ const routerNav = vi.fn();
+ render(<Harness routerNav={routerNav} />);
+
+ let promise!: Promise<void>;
+ act(() => {
+ promise = navigate('/dashboard');
+ });
+
+ await waitFor(() => {
+ expect(routerNav).toHaveBeenCalledWith('/dashboard');
+ });
+
+ // Promise resolves via isPending cycling alone — no usePathname needed
+ await expect(promise).resolves.toBeUndefined();
+ });
+
+ it('flushes pre-existing window buffer on mount', async () => {
+ const routerNav = vi.fn();
+
+ // Simulate promises left in the window buffer from a previous component instance
+ // (e.g., ClerkProvider unmounted during navigation — the core scenario from #2899)
+ let resolved1 = false;
+ let resolved2 = false;
+ window.__clerk_internal_navigations = {
+ push: {
+ promisesBuffer: [
+ () => {
+ resolved1 = true;
+ },
+ () => {
+ resolved2 = true;
+ },
+ ],
+ },
+ } as unknown as typeof window.__clerk_internal_navigations;
+
+ render(<Harness routerNav={routerNav} />);
+
+ // The mount effect should flush the pre-existing buffer
+ await waitFor(() => {
+ expect(resolved1).toBe(true);
+ expect(resolved2).toBe(true);
+ });
+ });
+
+ it('flushes pending promises on unmount', async () => {
+ const routerNav = vi.fn();
+ const { unmount } = render(<Harness routerNav={routerNav} />);
+
+ // Manually add resolvers to the buffer to simulate pending navigations
+ let resolved = false;
+ const nav = window.__clerk_internal_navigations.push;
+ nav.promisesBuffer = [
+ () => {
+ resolved = true;
+ },
+ ];
+
+ unmount();
+
+ // The useEffect cleanup should have flushed the promise buffer
+ expect(resolved).toBe(true);
+ });
+
+ it('uses history pushState for internal navigations', async () => {
+ const routerNav = vi.fn();
+ const mockWindowNav = vi.fn();
+
+ let internalNavigate: NavigationFunction | undefined;
+ const InternalHarness = () => {
+ internalNavigate = useInternalNavFun({
+ windowNav: mockWindowNav as typeof window.history.pushState,
+ routerNav: routerNav as any,
+ name: 'push',
+ });
+ return null;
+ };
+
+ render(<InternalHarness />);
+
+ act(() => {
+ internalNavigate!('/shallow-path', {
+ __internal_metadata: { navigationType: 'internal' },
+ windowNavigate: vi.fn(),
+ });
+ });
+
+ await waitFor(() => {
+ expect(mockWindowNav).toHaveBeenCalledWith(null, '', '/shallow-path');
+ });
+
+ expect(routerNav).not.toHaveBeenCalled();
+ });
 });

.changeset/add-navigation-promise-tests.md

@@ -0,0 +1,2 @@
+---
+---

integration/tests/cache-components.test.ts

@@ -323,5 +323,61 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes], withPattern:
  const userId = await userIdElement.textContent();
  expect(userId).toMatch(/^user_/);
  });
+
+ test('sign out completes and navigation promise resolves', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Sign in
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.expect.toBeSignedIn();
+
+ // Navigate to a non-root page to ensure post-sign-out navigation is a real route change
+ await u.page.goToRelative('/auth-server-component');
+ await expect(u.page.getByText('auth() in Server Component')).toBeVisible();
+
+ // Sign out by explicitly awaiting the full signOut() promise.
+ // Internally, signOut() calls: onBeforeSetActive (cache invalidation) →
+ // session removal → navigate(redirectUrl) via routerPush → useInternalNavFun →
+ // startTransition(() => router.push(to)).
+ // The navigate() call awaits the promise from useInternalNavFun.
+ // If isPending doesn't cycle (the concern from removing usePathname in #7989),
+ // the navigation promise hangs and this evaluate call times out.
+ await page.evaluate(async () => {
+ await window.Clerk.signOut();
+ });
+
+ await u.po.expect.toBeSignedOut();
+ });
+
+ test('protected route redirects to sign-in after sign out', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Sign in and access protected route
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/protected');
+ await expect(u.page.getByText('Protected Route')).toBeVisible();
+
+ // Sign out
+ await page.evaluate(async () => {
+ await window.Clerk.signOut();
+ });
+
+ await u.po.expect.toBeSignedOut();
+
+ // Try to access protected route again — should redirect to sign-in
+ // This verifies cache invalidation worked correctly alongside navigation
+ await u.page.goToRelative('/protected');
+ await expect(page).toHaveURL(/sign-in/);
+ });
  },
 );

packages/nextjs/src/app-router/client/__tests__/useInternalNavFun.test.tsx

@@ -99,4 +99,99 @@ describe('useInternalNavFun', () => {
  expect(routerNav).toHaveBeenCalledTimes(2);
  });
  });
+
+ it('resolves a single navigation promise without usePathname', async () => {
+ const routerNav = vi.fn();
+ render(<Harness routerNav={routerNav} />);
+
+ let promise!: Promise<void>;
+ act(() => {
+ promise = navigate('/dashboard');
+ });
+
+ await waitFor(() => {
+ expect(routerNav).toHaveBeenCalledWith('/dashboard');
+ });
+
+ // Promise resolves via isPending cycling alone — no usePathname needed
+ await expect(promise).resolves.toBeUndefined();
+ });
+
+ it('flushes pre-existing window buffer on mount', async () => {
+ const routerNav = vi.fn();
+
+ // Simulate promises left in the window buffer from a previous component instance
+ // (e.g., ClerkProvider unmounted during navigation — the core scenario from #2899)
+ let resolved1 = false;
+ let resolved2 = false;
+ window.__clerk_internal_navigations = {
+ push: {
+ promisesBuffer: [
+ () => {
+ resolved1 = true;
+ },
+ () => {
+ resolved2 = true;
+ },
+ ],
+ },
+ } as unknown as typeof window.__clerk_internal_navigations;
+
+ render(<Harness routerNav={routerNav} />);
+
+ // The mount effect should flush the pre-existing buffer
+ await waitFor(() => {
+ expect(resolved1).toBe(true);
+ expect(resolved2).toBe(true);
+ });
+ });
+
+ it('flushes pending promises on unmount', async () => {
+ const routerNav = vi.fn();
+ const { unmount } = render(<Harness routerNav={routerNav} />);
+
+ // Manually add resolvers to the buffer to simulate pending navigations
+ let resolved = false;
+ const nav = window.__clerk_internal_navigations.push;
+ nav.promisesBuffer = [
+ () => {
+ resolved = true;
+ },
+ ];
+
+ unmount();
+
+ // The useEffect cleanup should have flushed the promise buffer
+ expect(resolved).toBe(true);
+ });
+
+ it('uses history pushState for internal navigations', async () => {
+ const routerNav = vi.fn();
+ const mockWindowNav = vi.fn();
+
+ let internalNavigate: NavigationFunction | undefined;
+ const InternalHarness = () => {
+ internalNavigate = useInternalNavFun({
+ windowNav: mockWindowNav as typeof window.history.pushState,
+ routerNav: routerNav as any,
+ name: 'push',
+ });
+ return null;
+ };
+
+ render(<InternalHarness />);
+
+ act(() => {
+ internalNavigate!('/shallow-path', {
+ __internal_metadata: { navigationType: 'internal' },
+ windowNavigate: vi.fn(),
+ });
+ });
+
+ await waitFor(() => {
+ expect(mockWindowNav).toHaveBeenCalledWith(null, '', '/shallow-path');
+ });
+
+ expect(routerNav).not.toHaveBeenCalled();
+ });
 });

.changeset/add-navigation-promise-tests.md

@@ -0,0 +1,2 @@
+---
+---

integration/tests/cache-components.test.ts

@@ -323,5 +323,61 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes], withPattern:
  const userId = await userIdElement.textContent();
  expect(userId).toMatch(/^user_/);
  });
+
+ test('sign out completes and navigation promise resolves', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Sign in
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.expect.toBeSignedIn();
+
+ // Navigate to a non-root page to ensure post-sign-out navigation is a real route change
+ await u.page.goToRelative('/auth-server-component');
+ await expect(u.page.getByText('auth() in Server Component')).toBeVisible();
+
+ // Sign out by explicitly awaiting the full signOut() promise.
+ // Internally, signOut() calls: onBeforeSetActive (cache invalidation) →
+ // session removal → navigate(redirectUrl) via routerPush → useInternalNavFun →
+ // startTransition(() => router.push(to)).
+ // The navigate() call awaits the promise from useInternalNavFun.
+ // If isPending doesn't cycle (the concern from removing usePathname in #7989),
+ // the navigation promise hangs and this evaluate call times out.
+ await page.evaluate(async () => {
+ await window.Clerk.signOut();
+ });
+
+ await u.po.expect.toBeSignedOut();
+ });
+
+ test('protected route redirects to sign-in after sign out', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Sign in and access protected route
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/protected');
+ await expect(u.page.getByText('Protected Route')).toBeVisible();
+
+ // Sign out
+ await page.evaluate(async () => {
+ await window.Clerk.signOut();
+ });
+
+ await u.po.expect.toBeSignedOut();
+
+ // Try to access protected route again — should redirect to sign-in
+ // This verifies cache invalidation worked correctly alongside navigation
+ await u.page.goToRelative('/protected');
+ await expect(page).toHaveURL(/sign-in/);
+ });
  },
 );

packages/nextjs/src/app-router/client/__tests__/useInternalNavFun.test.tsx

@@ -99,4 +99,99 @@ describe('useInternalNavFun', () => {
  expect(routerNav).toHaveBeenCalledTimes(2);
  });
  });
+
+ it('resolves a single navigation promise without usePathname', async () => {
+ const routerNav = vi.fn();
+ render(<Harness routerNav={routerNav} />);
+
+ let promise!: Promise<void>;
+ act(() => {
+ promise = navigate('/dashboard');
+ });
+
+ await waitFor(() => {
+ expect(routerNav).toHaveBeenCalledWith('/dashboard');
+ });
+
+ // Promise resolves via isPending cycling alone — no usePathname needed
+ await expect(promise).resolves.toBeUndefined();
+ });
+
+ it('flushes pre-existing window buffer on mount', async () => {
+ const routerNav = vi.fn();
+
+ // Simulate promises left in the window buffer from a previous component instance
+ // (e.g., ClerkProvider unmounted during navigation — the core scenario from #2899)
+ let resolved1 = false;
+ let resolved2 = false;
+ window.__clerk_internal_navigations = {
+ push: {
+ promisesBuffer: [
+ () => {
+ resolved1 = true;
+ },
+ () => {
+ resolved2 = true;
+ },
+ ],
+ },
+ } as unknown as typeof window.__clerk_internal_navigations;
+
+ render(<Harness routerNav={routerNav} />);
+
+ // The mount effect should flush the pre-existing buffer
+ await waitFor(() => {
+ expect(resolved1).toBe(true);
+ expect(resolved2).toBe(true);
+ });
+ });
+
+ it('flushes pending promises on unmount', async () => {
+ const routerNav = vi.fn();
+ const { unmount } = render(<Harness routerNav={routerNav} />);
+
+ // Manually add resolvers to the buffer to simulate pending navigations
+ let resolved = false;
+ const nav = window.__clerk_internal_navigations.push;
+ nav.promisesBuffer = [
+ () => {
+ resolved = true;
+ },
+ ];
+
+ unmount();
+
+ // The useEffect cleanup should have flushed the promise buffer
+ expect(resolved).toBe(true);
+ });
+
+ it('uses history pushState for internal navigations', async () => {
+ const routerNav = vi.fn();
+ const mockWindowNav = vi.fn();
+
+ let internalNavigate: NavigationFunction | undefined;
+ const InternalHarness = () => {
+ internalNavigate = useInternalNavFun({
+ windowNav: mockWindowNav as typeof window.history.pushState,
+ routerNav: routerNav as any,
+ name: 'push',
+ });
+ return null;
+ };
+
+ render(<InternalHarness />);
+
+ act(() => {
+ internalNavigate!('/shallow-path', {
+ __internal_metadata: { navigationType: 'internal' },
+ windowNavigate: vi.fn(),
+ });
+ });
+
+ await waitFor(() => {
+ expect(mockWindowNav).toHaveBeenCalledWith(null, '', '/shallow-path');
+ });
+
+ expect(routerNav).not.toHaveBeenCalled();
+ });
 });

.changeset/add-navigation-promise-tests.md

@@ -0,0 +1,2 @@
+---
+---

integration/tests/cache-components.test.ts

@@ -323,5 +323,61 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes], withPattern:
  const userId = await userIdElement.textContent();
  expect(userId).toMatch(/^user_/);
  });
+
+ test('sign out completes and navigation promise resolves', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Sign in
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.expect.toBeSignedIn();
+
+ // Navigate to a non-root page to ensure post-sign-out navigation is a real route change
+ await u.page.goToRelative('/auth-server-component');
+ await expect(u.page.getByText('auth() in Server Component')).toBeVisible();
+
+ // Sign out by explicitly awaiting the full signOut() promise.
+ // Internally, signOut() calls: onBeforeSetActive (cache invalidation) →
+ // session removal → navigate(redirectUrl) via routerPush → useInternalNavFun →
+ // startTransition(() => router.push(to)).
+ // The navigate() call awaits the promise from useInternalNavFun.
+ // If isPending doesn't cycle (the concern from removing usePathname in #7989),
+ // the navigation promise hangs and this evaluate call times out.
+ await page.evaluate(async () => {
+ await window.Clerk.signOut();
+ });
+
+ await u.po.expect.toBeSignedOut();
+ });
+
+ test('protected route redirects to sign-in after sign out', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Sign in and access protected route
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/protected');
+ await expect(u.page.getByText('Protected Route')).toBeVisible();
+
+ // Sign out
+ await page.evaluate(async () => {
+ await window.Clerk.signOut();
+ });
+
+ await u.po.expect.toBeSignedOut();
+
+ // Try to access protected route again — should redirect to sign-in
+ // This verifies cache invalidation worked correctly alongside navigation
+ await u.page.goToRelative('/protected');
+ await expect(page).toHaveURL(/sign-in/);
+ });
  },
 );

packages/nextjs/src/app-router/client/__tests__/useInternalNavFun.test.tsx

@@ -99,4 +99,99 @@ describe('useInternalNavFun', () => {
  expect(routerNav).toHaveBeenCalledTimes(2);
  });
  });
+
+ it('resolves a single navigation promise without usePathname', async () => {
+ const routerNav = vi.fn();
+ render(<Harness routerNav={routerNav} />);
+
+ let promise!: Promise<void>;
+ act(() => {
+ promise = navigate('/dashboard');
+ });
+
+ await waitFor(() => {
+ expect(routerNav).toHaveBeenCalledWith('/dashboard');
+ });
+
+ // Promise resolves via isPending cycling alone — no usePathname needed
+ await expect(promise).resolves.toBeUndefined();
+ });
+
+ it('flushes pre-existing window buffer on mount', async () => {
+ const routerNav = vi.fn();
+
+ // Simulate promises left in the window buffer from a previous component instance
+ // (e.g., ClerkProvider unmounted during navigation — the core scenario from #2899)
+ let resolved1 = false;
+ let resolved2 = false;
+ window.__clerk_internal_navigations = {
+ push: {
+ promisesBuffer: [
+ () => {
+ resolved1 = true;
+ },
+ () => {
+ resolved2 = true;
+ },
+ ],
+ },
+ } as unknown as typeof window.__clerk_internal_navigations;
+
+ render(<Harness routerNav={routerNav} />);
+
+ // The mount effect should flush the pre-existing buffer
+ await waitFor(() => {
+ expect(resolved1).toBe(true);
+ expect(resolved2).toBe(true);
+ });
+ });
+
+ it('flushes pending promises on unmount', async () => {
+ const routerNav = vi.fn();
+ const { unmount } = render(<Harness routerNav={routerNav} />);
+
+ // Manually add resolvers to the buffer to simulate pending navigations
+ let resolved = false;
+ const nav = window.__clerk_internal_navigations.push;
+ nav.promisesBuffer = [
+ () => {
+ resolved = true;
+ },
+ ];
+
+ unmount();
+
+ // The useEffect cleanup should have flushed the promise buffer
+ expect(resolved).toBe(true);
+ });
+
+ it('uses history pushState for internal navigations', async () => {
+ const routerNav = vi.fn();
+ const mockWindowNav = vi.fn();
+
+ let internalNavigate: NavigationFunction | undefined;
+ const InternalHarness = () => {
+ internalNavigate = useInternalNavFun({
+ windowNav: mockWindowNav as typeof window.history.pushState,
+ routerNav: routerNav as any,
+ name: 'push',
+ });
+ return null;
+ };
+
+ render(<InternalHarness />);
+
+ act(() => {
+ internalNavigate!('/shallow-path', {
+ __internal_metadata: { navigationType: 'internal' },
+ windowNavigate: vi.fn(),
+ });
+ });
+
+ await waitFor(() => {
+ expect(mockWindowNav).toHaveBeenCalledWith(null, '', '/shallow-path');
+ });
+
+ expect(routerNav).not.toHaveBeenCalled();
+ });
 });

.changeset/add-navigation-promise-tests.md

@@ -0,0 +1,2 @@
+---
+---

integration/tests/cache-components.test.ts

@@ -323,5 +323,61 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes], withPattern:
  const userId = await userIdElement.textContent();
  expect(userId).toMatch(/^user_/);
  });
+
+ test('sign out completes and navigation promise resolves', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Sign in
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.expect.toBeSignedIn();
+
+ // Navigate to a non-root page to ensure post-sign-out navigation is a real route change
+ await u.page.goToRelative('/auth-server-component');
+ await expect(u.page.getByText('auth() in Server Component')).toBeVisible();
+
+ // Sign out by explicitly awaiting the full signOut() promise.
+ // Internally, signOut() calls: onBeforeSetActive (cache invalidation) →
+ // session removal → navigate(redirectUrl) via routerPush → useInternalNavFun →
+ // startTransition(() => router.push(to)).
+ // The navigate() call awaits the promise from useInternalNavFun.
+ // If isPending doesn't cycle (the concern from removing usePathname in #7989),
+ // the navigation promise hangs and this evaluate call times out.
+ await page.evaluate(async () => {
+ await window.Clerk.signOut();
+ });
+
+ await u.po.expect.toBeSignedOut();
+ });
+
+ test('protected route redirects to sign-in after sign out', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Sign in and access protected route
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/protected');
+ await expect(u.page.getByText('Protected Route')).toBeVisible();
+
+ // Sign out
+ await page.evaluate(async () => {
+ await window.Clerk.signOut();
+ });
+
+ await u.po.expect.toBeSignedOut();
+
+ // Try to access protected route again — should redirect to sign-in
+ // This verifies cache invalidation worked correctly alongside navigation
+ await u.page.goToRelative('/protected');
+ await expect(page).toHaveURL(/sign-in/);
+ });
  },
 );

packages/nextjs/src/app-router/client/__tests__/useInternalNavFun.test.tsx

@@ -99,4 +99,99 @@ describe('useInternalNavFun', () => {
  expect(routerNav).toHaveBeenCalledTimes(2);
  });
  });
+
+ it('resolves a single navigation promise without usePathname', async () => {
+ const routerNav = vi.fn();
+ render(<Harness routerNav={routerNav} />);
+
+ let promise!: Promise<void>;
+ act(() => {
+ promise = navigate('/dashboard');
+ });
+
+ await waitFor(() => {
+ expect(routerNav).toHaveBeenCalledWith('/dashboard');
+ });
+
+ // Promise resolves via isPending cycling alone — no usePathname needed
+ await expect(promise).resolves.toBeUndefined();
+ });
+
+ it('flushes pre-existing window buffer on mount', async () => {
+ const routerNav = vi.fn();
+
+ // Simulate promises left in the window buffer from a previous component instance
+ // (e.g., ClerkProvider unmounted during navigation — the core scenario from #2899)
+ let resolved1 = false;
+ let resolved2 = false;
+ window.__clerk_internal_navigations = {
+ push: {
+ promisesBuffer: [
+ () => {
+ resolved1 = true;
+ },
+ () => {
+ resolved2 = true;
+ },
+ ],
+ },
+ } as unknown as typeof window.__clerk_internal_navigations;
+
+ render(<Harness routerNav={routerNav} />);
+
+ // The mount effect should flush the pre-existing buffer
+ await waitFor(() => {
+ expect(resolved1).toBe(true);
+ expect(resolved2).toBe(true);
+ });
+ });
+
+ it('flushes pending promises on unmount', async () => {
+ const routerNav = vi.fn();
+ const { unmount } = render(<Harness routerNav={routerNav} />);
+
+ // Manually add resolvers to the buffer to simulate pending navigations
+ let resolved = false;
+ const nav = window.__clerk_internal_navigations.push;
+ nav.promisesBuffer = [
+ () => {
+ resolved = true;
+ },
+ ];
+
+ unmount();
+
+ // The useEffect cleanup should have flushed the promise buffer
+ expect(resolved).toBe(true);
+ });
+
+ it('uses history pushState for internal navigations', async () => {
+ const routerNav = vi.fn();
+ const mockWindowNav = vi.fn();
+
+ let internalNavigate: NavigationFunction | undefined;
+ const InternalHarness = () => {
+ internalNavigate = useInternalNavFun({
+ windowNav: mockWindowNav as typeof window.history.pushState,
+ routerNav: routerNav as any,
+ name: 'push',
+ });
+ return null;
+ };
+
+ render(<InternalHarness />);
+
+ act(() => {
+ internalNavigate!('/shallow-path', {
+ __internal_metadata: { navigationType: 'internal' },
+ windowNavigate: vi.fn(),
+ });
+ });
+
+ await waitFor(() => {
+ expect(mockWindowNav).toHaveBeenCalledWith(null, '', '/shallow-path');
+ });
+
+ expect(routerNav).not.toHaveBeenCalled();
+ });
 });

.changeset/add-navigation-promise-tests.md

@@ -0,0 +1,2 @@
+---
+---

integration/tests/cache-components.test.ts

@@ -323,5 +323,61 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes], withPattern:
  const userId = await userIdElement.textContent();
  expect(userId).toMatch(/^user_/);
  });
+
+ test('sign out completes and navigation promise resolves', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Sign in
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.expect.toBeSignedIn();
+
+ // Navigate to a non-root page to ensure post-sign-out navigation is a real route change
+ await u.page.goToRelative('/auth-server-component');
+ await expect(u.page.getByText('auth() in Server Component')).toBeVisible();
+
+ // Sign out by explicitly awaiting the full signOut() promise.
+ // Internally, signOut() calls: onBeforeSetActive (cache invalidation) →
+ // session removal → navigate(redirectUrl) via routerPush → useInternalNavFun →
+ // startTransition(() => router.push(to)).
+ // The navigate() call awaits the promise from useInternalNavFun.
+ // If isPending doesn't cycle (the concern from removing usePathname in #7989),
+ // the navigation promise hangs and this evaluate call times out.
+ await page.evaluate(async () => {
+ await window.Clerk.signOut();
+ });
+
+ await u.po.expect.toBeSignedOut();
+ });
+
+ test('protected route redirects to sign-in after sign out', async ({ page, context }) => {
+ const u = createTestUtils({ app, page, context });
+
+ // Sign in and access protected route
+ await u.po.signIn.goTo();
+ await u.po.signIn.signInWithEmailAndInstantPassword({
+ email: fakeUser.email,
+ password: fakeUser.password,
+ });
+ await u.po.expect.toBeSignedIn();
+
+ await u.page.goToRelative('/protected');
+ await expect(u.page.getByText('Protected Route')).toBeVisible();
+
+ // Sign out
+ await page.evaluate(async () => {
+ await window.Clerk.signOut();
+ });
+
+ await u.po.expect.toBeSignedOut();
+
+ // Try to access protected route again — should redirect to sign-in
+ // This verifies cache invalidation worked correctly alongside navigation
+ await u.page.goToRelative('/protected');
+ await expect(page).toHaveURL(/sign-in/);
+ });
  },
 );

packages/nextjs/src/app-router/client/__tests__/useInternalNavFun.test.tsx

@@ -99,4 +99,99 @@ describe('useInternalNavFun', () => {
  expect(routerNav).toHaveBeenCalledTimes(2);
  });
  });
+
+ it('resolves a single navigation promise without usePathname', async () => {
+ const routerNav = vi.fn();
+ render(<Harness routerNav={routerNav} />);
+
+ let promise!: Promise<void>;
+ act(() => {
+ promise = navigate('/dashboard');
+ });
+
+ await waitFor(() => {
+ expect(routerNav).toHaveBeenCalledWith('/dashboard');
+ });
+
+ // Promise resolves via isPending cycling alone — no usePathname needed
+ await expect(promise).resolves.toBeUndefined();
+ });
+
+ it('flushes pre-existing window buffer on mount', async () => {
+ const routerNav = vi.fn();
+
+ // Simulate promises left in the window buffer from a previous component instance
+ // (e.g., ClerkProvider unmounted during navigation — the core scenario from #2899)
+ let resolved1 = false;
+ let resolved2 = false;
+ window.__clerk_internal_navigations = {
+ push: {
+ promisesBuffer: [
+ () => {
+ resolved1 = true;
+ },
+ () => {
+ resolved2 = true;
+ },
+ ],
+ },
+ } as unknown as typeof window.__clerk_internal_navigations;
+
+ render(<Harness routerNav={routerNav} />);
+
+ // The mount effect should flush the pre-existing buffer
+ await waitFor(() => {
+ expect(resolved1).toBe(true);
+ expect(resolved2).toBe(true);
+ });
+ });
+
+ it('flushes pending promises on unmount', async () => {
+ const routerNav = vi.fn();
+ const { unmount } = render(<Harness routerNav={routerNav} />);
+
+ // Manually add resolvers to the buffer to simulate pending navigations
+ let resolved = false;
+ const nav = window.__clerk_internal_navigations.push;
+ nav.promisesBuffer = [
+ () => {
+ resolved = true;
+ },
+ ];
+
+ unmount();
+
+ // The useEffect cleanup should have flushed the promise buffer
+ expect(resolved).toBe(true);
+ });
+
+ it('uses history pushState for internal navigations', async () => {
+ const routerNav = vi.fn();
+ const mockWindowNav = vi.fn();
+
+ let internalNavigate: NavigationFunction | undefined;
+ const InternalHarness = () => {
+ internalNavigate = useInternalNavFun({
+ windowNav: mockWindowNav as typeof window.history.pushState,
+ routerNav: routerNav as any,
+ name: 'push',
+ });
+ return null;
+ };
+
+ render(<InternalHarness />);
+
+ act(() => {
+ internalNavigate!('/shallow-path', {
+ __internal_metadata: { navigationType: 'internal' },
+ windowNavigate: vi.fn(),
+ });
+ });
+
+ await waitFor(() => {
+ expect(mockWindowNav).toHaveBeenCalledWith(null, '', '/shallow-path');
+ });
+
+ expect(routerNav).not.toHaveBeenCalled();
+ });
 });