update tests for next13

Author: chargome

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/connected-servercomponent-trace.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { waitForTransaction } from '@sentry-internal/test-utils';
+import { isNext13 } from './nextjsVersion';
 
 test('Will create a transaction with spans for every server component and metadata generation functions when visiting a page', async ({
   page,
@@ -14,17 +15,20 @@ test('Will create a transaction with spans for every server component and metada
     return span.description;
   });
 
-  expect(spanDescriptions).toContainEqual('resolve page components');
   expect(spanDescriptions).toContainEqual('render route (app) /nested-layout');
-  expect(spanDescriptions).toContainEqual('build component tree');
-  expect(spanDescriptions).toContainEqual('resolve root layout server component');
-  expect(spanDescriptions).toContainEqual('resolve layout server component "(nested-layout)"');
-  expect(spanDescriptions).toContainEqual('resolve layout server component "nested-layout"');
-  expect(spanDescriptions).toContainEqual('resolve page server component "/nested-layout"');
   expect(spanDescriptions).toContainEqual('generateMetadata /(nested-layout)/nested-layout/page');
   expect(spanDescriptions).toContainEqual('Page.generateMetadata (/(nested-layout)/nested-layout)');
-  expect(spanDescriptions).toContainEqual('start response');
-  expect(spanDescriptions).toContainEqual('NextNodeServer.clientComponentLoading');
+
+  // Next.js 13 has limited OTEL support for server components, so we don't expect to see the following spans
+  if (!isNext13) {
+    expect(spanDescriptions).toContainEqual('resolve page components');
+    expect(spanDescriptions).toContainEqual('build component tree');
+    expect(spanDescriptions).toContainEqual('resolve root layout server component');
+    expect(spanDescriptions).toContainEqual('resolve layout server component "(nested-layout)"');
+    expect(spanDescriptions).toContainEqual('resolve layout server component "nested-layout"');
+    expect(spanDescriptions).toContainEqual('resolve page server component "/nested-layout"');
+    expect(spanDescriptions).toContainEqual('start response');
+  }
 });
 
 test('Will create a transaction with spans for every server component and metadata generation functions when visiting a dynamic page', async ({
@@ -41,16 +45,19 @@ test('Will create a transaction with spans for every server component and metada
     return span.description;
   });
 
-  expect(spanDescriptions).toContainEqual('resolve page components');
   expect(spanDescriptions).toContainEqual('render route (app) /nested-layout/[dynamic]');
-  expect(spanDescriptions).toContainEqual('build component tree');
-  expect(spanDescriptions).toContainEqual('resolve root layout server component');
-  expect(spanDescriptions).toContainEqual('resolve layout server component "(nested-layout)"');
-  expect(spanDescriptions).toContainEqual('resolve layout server component "nested-layout"');
-  expect(spanDescriptions).toContainEqual('resolve layout server component "[dynamic]"');
-  expect(spanDescriptions).toContainEqual('resolve page server component "/nested-layout/[dynamic]"');
   expect(spanDescriptions).toContainEqual('generateMetadata /(nested-layout)/nested-layout/[dynamic]/page');
   expect(spanDescriptions).toContainEqual('Page.generateMetadata (/(nested-layout)/nested-layout/[dynamic])');
-  expect(spanDescriptions).toContainEqual('start response');
-  expect(spanDescriptions).toContainEqual('NextNodeServer.clientComponentLoading');
+
+  // Next.js 13 has limited OTEL support for server components, so we don't expect to see the following spans
+  if (!isNext13) {
+    expect(spanDescriptions).toContainEqual('resolve page components');
+    expect(spanDescriptions).toContainEqual('build component tree');
+    expect(spanDescriptions).toContainEqual('resolve root layout server component');
+    expect(spanDescriptions).toContainEqual('resolve layout server component "(nested-layout)"');
+    expect(spanDescriptions).toContainEqual('resolve layout server component "nested-layout"');
+    expect(spanDescriptions).toContainEqual('resolve layout server component "[dynamic]"');
+    expect(spanDescriptions).toContainEqual('resolve page server component "/nested-layout/[dynamic]"');
+    expect(spanDescriptions).toContainEqual('start response');
+  }
 });

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/nextjsVersion.ts

@@ -0,0 +1,7 @@
+const packageJson = require('../package.json');
+const nextjsVersion = packageJson.dependencies.next;
+const nextjsMajor = Number(nextjsVersion.split('.')[0]);
+
+export const isNext13 = !isNaN(nextjsMajor) && nextjsMajor === 13;
+export const nextjsMajorVersion = nextjsMajor;
+

dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/server-components.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
+import { isNext13 } from './nextjsVersion';
 
 test('Sends a transaction for a request to app router', async ({ page }) => {
   const serverComponentTransactionPromise = waitForTransaction('nextjs-app-dir', transactionEvent => {
@@ -79,17 +80,20 @@ test('Should set a "not_found" status on a server component span when notFound()
     }),
   );
 
-  // Page server component span should have the right name and attributes
-  expect(transactionEvent.spans).toContainEqual(
-    expect.objectContaining({
-      description: 'resolve page server component "/server-component/not-found"',
-      op: 'function.nextjs',
-      data: expect.objectContaining({
-        'sentry.nextjs.ssr.function.type': 'Page',
-        'sentry.nextjs.ssr.function.route': '/server-component/not-found',
+  // Next.js 13 has limited OTEL support for server components, so we don't expect to see the following span
+  if (!isNext13) {
+    // Page server component span should have the right name and attributes
+    expect(transactionEvent.spans).toContainEqual(
+      expect.objectContaining({
+        description: 'resolve page server component "/server-component/not-found"',
+        op: 'function.nextjs',
+        data: expect.objectContaining({
+          'sentry.nextjs.ssr.function.type': 'Page',
+          'sentry.nextjs.ssr.function.route': '/server-component/not-found',
+        }),
       }),
-    }),
-  );
+    );
+  }
 });
 
 test('Should capture an error and transaction for a app router page', async ({ page }) => {
@@ -118,17 +122,20 @@ test('Should capture an error and transaction for a app router page', async ({ p
     }),
   );
 
-  // The page server component span should have the right name and attributes
-  expect(transactionEvent.spans).toContainEqual(
-    expect.objectContaining({
-      description: 'resolve page server component "/server-component/faulty"',
-      op: 'function.nextjs',
-      data: expect.objectContaining({
-        'sentry.nextjs.ssr.function.type': 'Page',
-        'sentry.nextjs.ssr.function.route': '/server-component/faulty',
+  // Next.js 13 has limited OTEL support for server components, so we don't expect to see the following span
+  if (!isNext13) {
+    // The page server component span should have the right name and attributes
+    expect(transactionEvent.spans).toContainEqual(
+      expect.objectContaining({
+        description: 'resolve page server component "/server-component/faulty"',
+        op: 'function.nextjs',
+        data: expect.objectContaining({
+          'sentry.nextjs.ssr.function.type': 'Page',
+          'sentry.nextjs.ssr.function.route': '/server-component/faulty',
+        }),
       }),
-    }),
-  );
+    );
+  }
 
   expect(errorEvent.tags?.['my-isolated-tag']).toBe(true);
   expect(errorEvent.tags?.['my-global-scope-isolated-tag']).not.toBeDefined();