add test case for deely nested route

Author: s1gr1d

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

@@ -62,20 +62,26 @@ const router = sentryCreateHashRouter([
     element: <Group />,
   },
   {
-    path: '/v2/post/:post',
-    element: <Post />,
+    path: '/v1/post/:post',
+    element: <div />,
     children: [
-      { index: true, element: <PostIndex /> },
-      {
-        path: 'featured',
-        element: <PostFeatured />,
-      },
+      { path: 'featured', element: <div /> },
+      { path: '/v1/post/:post/related', element: <div /> },
       {
-        path: '/v2/post/:post/related',
-        element: <PostRelated />,
+        element: <div>More Nested Children</div>,
+        children: [{ path: 'edit', element: <div>Edit Post</div> }],
       },
     ],
   },
+  {
+    path: '/v2/post/:post',
+    element: <div />,
+    children: [
+      { index: true, element: <div /> },
+      { path: 'featured', element: <div /> },
+      { path: '/v2/post/:post/related', element: <div /> },
+    ],
+  },
 ]);
 
 console.log(router.routes);

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

@@ -18,6 +18,9 @@ const Index = () => {
       <Link to="/v2/post/1" id="navigation-post-1">
         Post 1
       </Link>
+      <Link to="/v1/post/1/edit" id="navigation-post-1-edit">
+        Edit Post 1
+      </Link>
       <Link to="/v2/post/1/featured" id="navigation-post-1-featured">
         Post 1 featured
       </Link>

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

@@ -191,6 +191,26 @@ test('Captures a parameterized path pageload transaction for nested route', asyn
   );
 });
 
+test('Captures a parameterized path pageload transaction for deeply nested route', async ({ page }) => {
+  const transactionEventPromise = waitForTransaction('react-create-hash-router', event => {
+    return event.contexts?.trace?.op === 'pageload';
+  });
+
+  await page.goto('/#/v1/post/1/edit');
+
+  const transactionEvent = await transactionEventPromise;
+
+  expect(transactionEvent).toEqual(
+    expect.objectContaining({
+      transaction: '/v1/post/:post/edit',
+      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';
@@ -255,6 +275,28 @@ test('Captures a parameterized path navigation transaction for nested route', as
   );
 });
 
+test('Captures a parameterized path navigation transaction for deeply 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-edit');
+  await linkElement.click();
+
+  const transactionEvent = await transactionEventPromise;
+
+  expect(transactionEvent).toEqual(
+    expect.objectContaining({
+      transaction: '/v1/post/:post/edit',
+      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';