Update e2e tests.

Author: onurtemizkan

dev-packages/e2e-tests/test-applications/react-router-6-descendant-routes/package.json

@@ -51,13 +51,5 @@
   },
   "volta": {
     "extends": "../../package.json"
-  },
-  "sentryTest": {
-    "variants": [
-      {
-        "build-command": "test:build-ts3.8",
-        "label": "react-router-6 (TS 3.8)"
-      }
-    ]
   }
 }

dev-packages/e2e-tests/test-applications/react-router-6-descendant-routes/src/index.tsx

@@ -11,6 +11,7 @@ import {
   useLocation,
   useNavigationType,
 } from 'react-router-dom';
+import Index from './pages/Index';
 
 const replay = Sentry.replayIntegration();
 
@@ -60,7 +61,7 @@ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
   <BrowserRouter>
     <SentryRoutes>
-      {/* <Route index element={<Navigate to="/projects/123/views/234" />} /> */}
+      <Route path='/' element={<Index/>} />
       <Route path="projects/*" element={<ProjectsRoutes />}></Route>
     </SentryRoutes>
   </BrowserRouter>,

dev-packages/e2e-tests/test-applications/react-router-6-descendant-routes/src/pages/Index.tsx

@@ -5,15 +5,7 @@ import { Link } from 'react-router-dom';
 const Index = () => {
   return (
     <>
-      <input
-        type="button"
-        value="Capture Exception"
-        id="exception-button"
-        onClick={() => {
-          throw new Error('I am an error!');
-        }}
-      />
-      <Link to="/user/5" id="navigation">
+      <Link to="/projects/123/views/456" id="navigation">
         navigate
       </Link>
     </>

dev-packages/e2e-tests/test-applications/react-router-6-descendant-routes/tests/transactions.test.ts

@@ -10,8 +10,6 @@ test('sends a pageload transaction with a parameterized URL', async ({ page }) =
 
   const rootSpan = await transactionPromise;
 
-  console.debug('rootSpan', rootSpan);
-
   expect(rootSpan).toMatchObject({
     contexts: {
       trace: {
@@ -26,34 +24,44 @@ test('sends a pageload transaction with a parameterized URL', async ({ page }) =
   });
 });
 
-// test('sends a navigation transaction with a parameterized URL', async ({ page }) => {
-//   page.on('console', msg => console.log(msg.text()));
-
-//   const pageloadTxnPromise = waitForTransaction('react-router-6-descendant-routes', async transactionEvent => {
-//     return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
-//   });
-
-//   const navigationTxnPromise = waitForTransaction('react-router-6-descendant-routes', async transactionEvent => {
-//     return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation';
-//   });
-
-//   await page.goto(`/`);
-//   await pageloadTxnPromise;
-
-//   const linkElement = page.locator('id=navigation');
-
-//   const [_, navigationTxn] = await Promise.all([linkElement.click(), navigationTxnPromise]);
-
-//   expect(navigationTxn).toMatchObject({
-//     contexts: {
-//       trace: {
-//         op: 'navigation',
-//         origin: 'auto.navigation.react.reactrouter_v6',
-//       },
-//     },
-//     transaction: '/user/:id',
-//     transaction_info: {
-//       source: 'route',
-//     },
-//   });
-// });
+test('sends a navigation transaction with a parameterized URL', async ({ page }) => {
+  const pageloadTxnPromise = waitForTransaction('react-router-6-descendant-routes', async transactionEvent => {
+    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
+  });
+
+  const navigationTxnPromise = waitForTransaction('react-router-6-descendant-routes', async transactionEvent => {
+    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation';
+  });
+
+  await page.goto(`/`);
+  const pageloadTxn = await pageloadTxnPromise;
+
+  expect(pageloadTxn).toMatchObject({
+    contexts: {
+      trace: {
+        op: 'pageload',
+        origin: 'auto.pageload.react.reactrouter_v6',
+      },
+    },
+    transaction: '/',
+    transaction_info: {
+      source: 'route',
+    },
+  });
+
+  const linkElement = page.locator('id=navigation');
+
+  const [_, navigationTxn] = await Promise.all([linkElement.click(), navigationTxnPromise]);
+  expect(navigationTxn).toMatchObject({
+    contexts: {
+      trace: {
+        op: 'navigation',
+        origin: 'auto.navigation.react.reactrouter_v6',
+      },
+    },
+    transaction: '/projects/:projectId/views/:viewId',
+    transaction_info: {
+      source: 'route',
+    },
+  });
+});