test: added e2e test

Author: logaretm

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/metadata/page.tsx

@@ -0,0 +1,35 @@
+import * as Sentry from '@sentry/nextjs';
+
+/**
+ * Tests generateMetadata function with cache components, this calls the propagation context to be set
+ * Which will generate and set a trace id in the propagation context, which should trigger the random API error if unpatched
+ * See: https://github.com/getsentry/sentry-javascript/issues/18392
+ */
+export function generateMetadata() {
+  return {
+    title: 'Cache Components Metadata Test',
+  };
+}
+
+export default function Page() {
+  return (
+    <>
+      <h1>This will be pre-rendered</h1>
+      <DynamicContent />
+    </>
+  );
+}
+
+async function DynamicContent() {
+  const getTodos = async () => {
+    return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+      'use cache';
+      await new Promise(resolve => setTimeout(resolve, 100));
+      return [1, 2, 3, 4, 5];
+    });
+  };
+
+  const todos = await getTodos();
+
+  return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts

@@ -26,3 +26,16 @@ test('Should render suspense component', async ({ page }) => {
   expect(serverTx.spans?.filter(span => span.op === 'get.todos').length).toBeGreaterThan(0);
   await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
 });
+
+test('Should generate metadata', async ({ page }) => {
+  const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+    return transactionEvent.contexts?.trace?.op === 'http.server';
+  });
+
+  await page.goto('/metadata');
+  const serverTx = await serverTxPromise;
+
+  expect(serverTx.spans?.filter(span => span.op === 'get.todos')).toHaveLength(0);
+  await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+  await expect(page).toHaveTitle('Cache Components Metadata Test');
+});