test(react): Add parameterized route tests for createHashRouter

dev-packages/e2e-tests/test-applications/react-create-hash-router/package.json

@@ -15,6 +15,7 @@
   },
   "scripts": {
     "build": "react-scripts build",
+    "dev": "react-scripts start",
     "start": "serve -s build",
     "test": "playwright test",
     "clean": "npx rimraf node_modules pnpm-lock.yaml",

dev-packages/e2e-tests/test-applications/react-create-hash-router/src/index.tsx

@@ -11,6 +11,11 @@ import {
 } from 'react-router-dom';
 import Index from './pages/Index';
 import User from './pages/User';
+import Group from './pages/Group';
+import Post from './pages/Post';
+import PostFeatured from './pages/PostFeatured';
+import PostRelated from './pages/PostRelated';
+import PostIndex from './pages/PostIndex';
 
 const replay = Sentry.replayIntegration();
 
@@ -52,8 +57,29 @@ const router = sentryCreateHashRouter([
     path: '/user/:id',
     element: <User />,
   },
+  {
+    path: '/group/:group/:user?',
+    element: <Group />,
+  },
+  {
+    path: '/v2/post/:post',
+    element: <Post />,
+    children: [
+      { index: true, element: <PostIndex /> },
+      {
+        path: 'featured',
+        element: <PostFeatured />,
+      },
+      {
+        path: '/v2/post/:post/related',
+        element: <PostRelated />,
+      },
+    ],
+  },
 ]);
 
+console.log(router.routes);
+
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 root.render(<RouterProvider router={router} />);

dev-packages/e2e-tests/test-applications/react-create-hash-router/src/pages/Group.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+const Group = () => {
+  return <p>Group page</p>;
+};
+
+export default Group;

dev-packages/e2e-tests/test-applications/react-create-hash-router/src/pages/Index.tsx

@@ -15,6 +15,21 @@ const Index = () => {
       <Link to="/user/5" id="navigation">
         navigate
       </Link>
+      <Link to="/v2/post/1" id="navigation-post-1">
+        Post 1
+      </Link>
+      <Link to="/v2/post/1/featured" id="navigation-post-1-featured">
+        Post 1 featured
+      </Link>
+      <Link to="/v2/post/1/related" id="navigation-post-1-related">
+        Post 1 related
+      </Link>
+      <Link to="/group/1" id="navigation-group-1">
+        Group 1
+      </Link>
+      <Link to="/group/1/5" id="navigation-group-1-user-5">
+        Group 1 user 5
+      </Link>
     </>
   );
 };

dev-packages/e2e-tests/test-applications/react-create-hash-router/src/pages/Post.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Outlet } from 'react-router-dom';
+
+const Post = () => {
+  return (
+    <>
+      <p>Post V2 page</p>
+      <Outlet />
+    </>
+  );
+};
+
+export default Post;

dev-packages/e2e-tests/test-applications/react-create-hash-router/src/pages/PostFeatured.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+const PostFeatured = () => {
+  return <p>Post featured page</p>;
+};
+
+export default PostFeatured;

dev-packages/e2e-tests/test-applications/react-create-hash-router/src/pages/PostIndex.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+const PostIndex = () => {
+  return <p>Post index page</p>;
+};
+
+export default PostIndex;

dev-packages/e2e-tests/test-applications/react-create-hash-router/src/pages/PostRelated.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+const PostRelated = () => {
+  return <p>Post related page</p>;
+};
+
+export default PostRelated;

dev-packages/e2e-tests/test-applications/react-create-hash-router/tests/transactions.test.ts

@@ -14,9 +14,9 @@ test('Captures a pageload transaction', async ({ page }) => {
       deviceMemory: expect.any(String),
       effectiveConnectionType: expect.any(String),
       hardwareConcurrency: expect.any(String),
-      'lcp.element': 'body > div#root > input#exception-button[type="button"]',
-      'lcp.id': 'exception-button',
-      'lcp.size': 1650,
+      'lcp.element': expect.any(String),
+      'lcp.id': expect.any(String),
+      'lcp.size': expect.any(Number),
       'sentry.idle_span_finish_reason': 'idleTimeout',
       'sentry.op': 'pageload',
       'sentry.origin': 'auto.pageload.react.reactrouter_v6',
@@ -150,3 +150,213 @@ test('Captures a navigation transaction', async ({ page }) => {
 
   expect(transactionEvent.spans).toEqual([]);
 });
+
+test('Captures a parameterized path pageload transaction', async ({ page }) => {
+  const transactionEventPromise = waitForTransaction('react-create-hash-router', event => {
+    return event.contexts?.trace?.op === 'pageload';
+  });
+
+  await page.goto('/#/v2/post/1');
+
+  const transactionEvent = await transactionEventPromise;
+
+  expect(transactionEvent).toEqual(
+    expect.objectContaining({
+      transaction: '/v2/post/:post',
+      type: 'transaction',
+      transaction_info: {
+        source: 'route',
+      },
+    }),
+  );
+});
+
+test('Captures a parameterized path pageload transaction for nested route', async ({ page }) => {
+  const transactionEventPromise = waitForTransaction('react-create-hash-router', event => {
+    return event.contexts?.trace?.op === 'pageload';
+  });
+
+  await page.goto('/#/v2/post/1/featured');
+
+  const transactionEvent = await transactionEventPromise;
+
+  expect(transactionEvent).toEqual(
+    expect.objectContaining({
+      transaction: '/v2/post/:post/featured',
+      type: 'transaction',
+      transaction_info: {
+        source: 'route',
+      },
+    }),
+  );
+});
+
+test('Captures a parameterized path pageload transaction for nested route with absolute path', async ({ page }) => {
+  const transactionEventPromise = waitForTransaction('react-create-hash-router', event => {
+    return event.contexts?.trace?.op === 'pageload';
+  });
+
+  await page.goto('/#/v2/post/1/related');
+
+  const transactionEvent = await transactionEventPromise;
+
+  expect(transactionEvent).toEqual(
+    expect.objectContaining({
+      transaction: '/v2/post/:post/related',
+      type: 'transaction',
+      transaction_info: {
+        source: 'route',
+      },
+    }),
+  );
+});
+
+test('Captures a parameterized path navigation transaction', async ({ page }) => {
+  const transactionEventPromise = waitForTransaction('react-create-hash-router', event => {
+    return event.contexts?.trace?.op === 'navigation';
+  });
+
+  await page.goto('/');
+  const linkElement = page.locator('id=navigation-post-1');
+  await linkElement.click();
+
+  const transactionEvent = await transactionEventPromise;
+
+  expect(transactionEvent).toEqual(
+    expect.objectContaining({
+      transaction: '/v2/post/:post',
+      type: 'transaction',
+      transaction_info: {
+        source: 'route',
+      },
+    }),
+  );
+});
+
+test('Captures a parameterized path navigation transaction for nested route', async ({ page }) => {
+  const transactionEventPromise = waitForTransaction('react-create-hash-router', event => {
+    return event.contexts?.trace?.op === 'navigation';
+  });
+
+  await page.goto('/');
+  const linkElement = page.locator('id=navigation-post-1-featured');
+  await linkElement.click();
+
+  const transactionEvent = await transactionEventPromise;
+
+  expect(transactionEvent).toEqual(
+    expect.objectContaining({
+      transaction: '/v2/post/:post/featured',
+      type: 'transaction',
+      transaction_info: {
+        source: 'route',
+      },
+    }),
+  );
+});
+
+test('Captures a parameterized path navigation transaction for nested route with absolute path', async ({ page }) => {
+  const transactionEventPromise = waitForTransaction('react-create-hash-router', event => {
+    return event.contexts?.trace?.op === 'navigation';
+  });
+
+  await page.goto('/');
+  const linkElement = page.locator('id=navigation-post-1-related');
+  await linkElement.click();
+
+  const transactionEvent = await transactionEventPromise;
+
+  expect(transactionEvent).toEqual(
+    expect.objectContaining({
+      transaction: '/v2/post/:post/related',
+      type: 'transaction',
+      transaction_info: {
+        source: 'route',
+      },
+    }),
+  );
+});
+
+test('Captures a parameterized path pageload transaction for group route', async ({ page }) => {
+  const transactionEventPromise = waitForTransaction('react-create-hash-router', event => {
+    return event.contexts?.trace?.op === 'pageload';
+  });
+
+  await page.goto('/#/group/1');
+
+  const transactionEvent = await transactionEventPromise;
+
+  expect(transactionEvent).toEqual(
+    expect.objectContaining({
+      transaction: '/group/:group/:user?',
+      type: 'transaction',
+      transaction_info: {
+        source: 'route',
+      },
+    }),
+  );
+});
+
+test('Captures a parameterized path navigation transaction for group route', async ({ page }) => {
+  const transactionEventPromise = waitForTransaction('react-create-hash-router', event => {
+    return event.contexts?.trace?.op === 'navigation';
+  });
+
+  await page.goto('/');
+  const linkElement = page.locator('id=navigation-group-1');
+  await linkElement.click();
+
+  const transactionEvent = await transactionEventPromise;
+
+  expect(transactionEvent).toEqual(
+    expect.objectContaining({
+      transaction: '/group/:group/:user?',
+      type: 'transaction',
+      transaction_info: {
+        source: 'route',
+      },
+    }),
+  );
+});
+
+test('Captures a parameterized path pageload transaction for nested group route', async ({ page }) => {
+  const transactionEventPromise = waitForTransaction('react-create-hash-router', event => {
+    return event.contexts?.trace?.op === 'pageload';
+  });
+
+  await page.goto('/#/group/1/5');
+
+  const transactionEvent = await transactionEventPromise;
+
+  expect(transactionEvent).toEqual(
+    expect.objectContaining({
+      transaction: '/group/:group/:user?',
+      type: 'transaction',
+      transaction_info: {
+        source: 'route',
+      },
+    }),
+  );
+});
+
+test('Captures a parameterized path navigation transaction for nested group route', async ({ page }) => {
+  const transactionEventPromise = waitForTransaction('react-create-hash-router', event => {
+    return event.contexts?.trace?.op === 'navigation';
+  });
+
+  await page.goto('/');
+  const linkElement = page.locator('id=navigation-group-1-user-5');
+  await linkElement.click();
+
+  const transactionEvent = await transactionEventPromise;
+
+  expect(transactionEvent).toEqual(
+    expect.objectContaining({
+      transaction: '/group/:group/:user?',
+      type: 'transaction',
+      transaction_info: {
+        source: 'route',
+      },
+    }),
+  );
+});