test(react-router): Add and fix tests for pre rendered routes (#16346)

It was confirmed that static pre-renders don't pick up Sentry trace meta
tags — this just adds a quick test.
More context:
https://linear.app/getsentry/issue/JS-392/rr7-evaluate-static-pre-rendering

P.S. Not a priority, but for some reason, I had to add a trailing / to
fetch the correct transactions and pass the tests. I’ll look into why
this is happening for transaction route names and whether this behavior
is expected in a later PR.

---------

Co-authored-by: Charly Gomez <[email protected]>

Author: RulaKhaled

dev-packages/e2e-tests/test-applications/react-router-7-framework/react-router.config.ts

@@ -2,6 +2,5 @@ import type { Config } from '@react-router/dev/config';
 
 export default {
   ssr: true,
-  // todo: check why this messes up client tracing in tests
-  // prerender: ['/performance/static'],
+  prerender: ['/performance/static'],
 } satisfies Config;

dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/pageload.client.test.ts

@@ -5,7 +5,7 @@ import { APP_NAME } from '../constants';
 test.describe('client - pageload performance', () => {
   test('should send pageload transaction', async ({ page }) => {
     const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
-      return transactionEvent.transaction === '/performance';
+      return transactionEvent.transaction === '/performance/';
     });
 
     await page.goto(`/performance`);
@@ -29,7 +29,7 @@ test.describe('client - pageload performance', () => {
       spans: expect.any(Array),
       start_timestamp: expect.any(Number),
       timestamp: expect.any(Number),
-      transaction: '/performance',
+      transaction: '/performance/',
       type: 'transaction',
       transaction_info: { source: 'url' },
       measurements: expect.any(Object),
@@ -103,18 +103,17 @@ test.describe('client - pageload performance', () => {
     });
   });
 
-  // todo: this page is currently not prerendered (see react-router.config.ts)
   test('should send pageload transaction for prerendered pages', async ({ page }) => {
     const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
-      return transactionEvent.transaction === '/performance/static';
+      return transactionEvent.transaction === '/performance/static/';
     });
 
     await page.goto(`/performance/static`);
 
     const transaction = await txPromise;
 
     expect(transaction).toMatchObject({
-      transaction: '/performance/static',
+      transaction: '/performance/static/',
       contexts: {
         trace: {
           span_id: expect.any(String),

dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/trace-propagation.test.ts

@@ -33,4 +33,11 @@ test.describe('Trace propagation', () => {
     expect(clientTx.contexts?.trace?.trace_id).toEqual(serverTx.contexts?.trace?.trace_id);
     expect(clientTx.contexts?.trace?.parent_span_id).toBe(serverTx.contexts?.trace?.span_id);
   });
+
+  test('should not have trace connection for prerendered pages', async ({ page }) => {
+    await page.goto('/performance/static');
+
+    const sentryTraceElement = await page.$('meta[name="sentry-trace"]');
+    expect(sentryTraceElement).toBeNull();
+  });
 });