test(remix-hydrogen): Fix flaky navigation transaction test

[github-actions]

Summary

Fixes the flaky [chromium] › tests/client-transactions.test.ts:16:1 › Sends a navigation transaction to Sentry E2E test in the remix-hydrogen test application.

Root cause

The test does page.goto('/') and then immediately clicks the #navigation<Link>, expecting a client-side navigation transaction to /user/:id.

If Remix has not finished hydrating when the click fires, the <Link> behaves like a plain <a href="/user/5"> and the browser performs a full page navigation. That produces a pageload transaction for /user/:id rather than a navigation transaction. Since the test only resolves on op === 'navigation', the waitForTransaction promise never settles and the test times out — the source of the flake.

Fix

Wait for the initial pageload transaction (op === 'pageload', transaction === '/') to be sent before clicking the link. By the time that transaction is emitted, the client SDK and Remix router are hydrated, so the click reliably produces a client-side navigation transaction. This mirrors the existing pageloadPromise pattern already used in react-router-7-lazy-routes/tests/transactions.test.ts.

All existing assertions are preserved unchanged.

Fixes#21198

[github-actions]

Summary

Fixes the flaky [chromium] › tests/client-transactions.test.ts:16:1 › Sends a navigation transaction to Sentry E2E test in the remix-hydrogen test application.

Root cause

The test does page.goto('/') and then immediately clicks the #navigation<Link>, expecting a client-side navigation transaction to /user/:id.

If Remix has not finished hydrating when the click fires, the <Link> behaves like a plain <a href="/user/5"> and the browser performs a full page navigation. That produces a pageload transaction for /user/:id rather than a navigation transaction. Since the test only resolves on op === 'navigation', the waitForTransaction promise never settles and the test times out — the source of the flake.

Fix

Wait for the initial pageload transaction (op === 'pageload', transaction === '/') to be sent before clicking the link. By the time that transaction is emitted, the client SDK and Remix router are hydrated, so the click reliably produces a client-side navigation transaction. This mirrors the existing pageloadPromise pattern already used in react-router-7-lazy-routes/tests/transactions.test.ts.

All existing assertions are preserved unchanged.

Fixes#21198

[github-actions]

Summary

Fixes the flaky [chromium] › tests/client-transactions.test.ts:16:1 › Sends a navigation transaction to Sentry E2E test in the remix-hydrogen test application.

Root cause

The test does page.goto('/') and then immediately clicks the #navigation<Link>, expecting a client-side navigation transaction to /user/:id.

If Remix has not finished hydrating when the click fires, the <Link> behaves like a plain <a href="/user/5"> and the browser performs a full page navigation. That produces a pageload transaction for /user/:id rather than a navigation transaction. Since the test only resolves on op === 'navigation', the waitForTransaction promise never settles and the test times out — the source of the flake.

Fix

Wait for the initial pageload transaction (op === 'pageload', transaction === '/') to be sent before clicking the link. By the time that transaction is emitted, the client SDK and Remix router are hydrated, so the click reliably produces a client-side navigation transaction. This mirrors the existing pageloadPromise pattern already used in react-router-7-lazy-routes/tests/transactions.test.ts.

All existing assertions are preserved unchanged.

Fixes#21198

[github-actions]

Summary

Fixes the flaky [chromium] › tests/client-transactions.test.ts:16:1 › Sends a navigation transaction to Sentry E2E test in the remix-hydrogen test application.

Root cause

The test does page.goto('/') and then immediately clicks the #navigation<Link>, expecting a client-side navigation transaction to /user/:id.

If Remix has not finished hydrating when the click fires, the <Link> behaves like a plain <a href="/user/5"> and the browser performs a full page navigation. That produces a pageload transaction for /user/:id rather than a navigation transaction. Since the test only resolves on op === 'navigation', the waitForTransaction promise never settles and the test times out — the source of the flake.

Fix

Wait for the initial pageload transaction (op === 'pageload', transaction === '/') to be sent before clicking the link. By the time that transaction is emitted, the client SDK and Remix router are hydrated, so the click reliably produces a client-side navigation transaction. This mirrors the existing pageloadPromise pattern already used in react-router-7-lazy-routes/tests/transactions.test.ts.

All existing assertions are preserved unchanged.

Fixes#21198

[github-actions]

Summary

Fixes the flaky [chromium] › tests/client-transactions.test.ts:16:1 › Sends a navigation transaction to Sentry E2E test in the remix-hydrogen test application.

Root cause

The test does page.goto('/') and then immediately clicks the #navigation<Link>, expecting a client-side navigation transaction to /user/:id.

If Remix has not finished hydrating when the click fires, the <Link> behaves like a plain <a href="/user/5"> and the browser performs a full page navigation. That produces a pageload transaction for /user/:id rather than a navigation transaction. Since the test only resolves on op === 'navigation', the waitForTransaction promise never settles and the test times out — the source of the flake.

Fix

Wait for the initial pageload transaction (op === 'pageload', transaction === '/') to be sent before clicking the link. By the time that transaction is emitted, the client SDK and Remix router are hydrated, so the click reliably produces a client-side navigation transaction. This mirrors the existing pageloadPromise pattern already used in react-router-7-lazy-routes/tests/transactions.test.ts.

All existing assertions are preserved unchanged.

Fixes#21198

[github-actions]

Summary

Fixes the flaky [chromium] › tests/client-transactions.test.ts:16:1 › Sends a navigation transaction to Sentry E2E test in the remix-hydrogen test application.

Root cause

The test does page.goto('/') and then immediately clicks the #navigation<Link>, expecting a client-side navigation transaction to /user/:id.

If Remix has not finished hydrating when the click fires, the <Link> behaves like a plain <a href="/user/5"> and the browser performs a full page navigation. That produces a pageload transaction for /user/:id rather than a navigation transaction. Since the test only resolves on op === 'navigation', the waitForTransaction promise never settles and the test times out — the source of the flake.

Fix

Wait for the initial pageload transaction (op === 'pageload', transaction === '/') to be sent before clicking the link. By the time that transaction is emitted, the client SDK and Remix router are hydrated, so the click reliably produces a client-side navigation transaction. This mirrors the existing pageloadPromise pattern already used in react-router-7-lazy-routes/tests/transactions.test.ts.

All existing assertions are preserved unchanged.

Fixes#21198

[github-actions]

Summary

Fixes the flaky [chromium] › tests/client-transactions.test.ts:16:1 › Sends a navigation transaction to Sentry E2E test in the remix-hydrogen test application.

Root cause

The test does page.goto('/') and then immediately clicks the #navigation<Link>, expecting a client-side navigation transaction to /user/:id.

If Remix has not finished hydrating when the click fires, the <Link> behaves like a plain <a href="/user/5"> and the browser performs a full page navigation. That produces a pageload transaction for /user/:id rather than a navigation transaction. Since the test only resolves on op === 'navigation', the waitForTransaction promise never settles and the test times out — the source of the flake.

Fix

Wait for the initial pageload transaction (op === 'pageload', transaction === '/') to be sent before clicking the link. By the time that transaction is emitted, the client SDK and Remix router are hydrated, so the click reliably produces a client-side navigation transaction. This mirrors the existing pageloadPromise pattern already used in react-router-7-lazy-routes/tests/transactions.test.ts.

All existing assertions are preserved unchanged.

Fixes#21198

[github-actions]

Summary

Fixes the flaky [chromium] › tests/client-transactions.test.ts:16:1 › Sends a navigation transaction to Sentry E2E test in the remix-hydrogen test application.

Root cause

The test does page.goto('/') and then immediately clicks the #navigation<Link>, expecting a client-side navigation transaction to /user/:id.

If Remix has not finished hydrating when the click fires, the <Link> behaves like a plain <a href="/user/5"> and the browser performs a full page navigation. That produces a pageload transaction for /user/:id rather than a navigation transaction. Since the test only resolves on op === 'navigation', the waitForTransaction promise never settles and the test times out — the source of the flake.

Fix

Wait for the initial pageload transaction (op === 'pageload', transaction === '/') to be sent before clicking the link. By the time that transaction is emitted, the client SDK and Remix router are hydrated, so the click reliably produces a client-side navigation transaction. This mirrors the existing pageloadPromise pattern already used in react-router-7-lazy-routes/tests/transactions.test.ts.

All existing assertions are preserved unchanged.

Fixes#21198