Move test to e2e

Author: Luca Forstner

dev-packages/e2e-tests/test-applications/nextjs-14/instrumentation.ts

@@ -8,7 +8,6 @@ export function register() {
       tunnel: `http://localhost:3031/`, // proxy server
       tracesSampleRate: 1.0,
       sendDefaultPii: true,
-      debug: true,
       transportOptions: {
         // We are doing a lot of events at once in this test
         bufferSize: 1000,

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

@@ -8,7 +8,6 @@ export function register() {
       tunnel: `http://localhost:3031/`, // proxy server
       tracesSampleRate: 1.0,
       sendDefaultPii: true,
-      debug: true,
       transportOptions: {
         // We are doing a lot of events at once in this test
         bufferSize: 1000,

dev-packages/e2e-tests/test-applications/nextjs-app-dir/pages/api/request-instrumentation.ts

@@ -0,0 +1,15 @@
+import { get } from 'http';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+export default (_req: NextApiRequest, res: NextApiResponse) => {
+  // make an outgoing request in order to test that the `Http` integration creates a span
+  get('http://example.com/', message => {
+    message.on('data', () => {
+      // Noop consuming some data so that request can close :)
+    });
+
+    message.on('close', () => {
+      res.status(200).json({});
+    });
+  });
+};

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

@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '../event-proxy-server';
+
+test('Should send a transaction with a fetch span', async ({ request }) => {
+  const transactionPromise = waitForTransaction('nextjs-13-app-dir', async transactionEvent => {
+    return transactionEvent?.transaction === 'GET /api/request-instrumentation';
+  });
+
+  await request.get('/api/request-instrumentation');
+
+  expect((await transactionPromise).spans).toContainEqual(
+    expect.objectContaining({
+      data: expect.objectContaining({
+        'http.method': 'GET',
+        'sentry.op': 'http.client',
+        'sentry.origin': 'auto.http.otel.http',
+      }),
+      description: 'GET http://example.com/',
+    }),
+  );
+});

packages/nextjs/test/integration/pages/api/http/index.ts

@@ -1,17 +1,5 @@
-import { get } from 'http';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 export default (_req: NextApiRequest, res: NextApiResponse) => {
-  // make an outgoing request in order to test that the `Http` integration creates a span
-  get('http://example.com/', message => {
-    message.on('data', () => {
-      // Noop consuming some data so that request can close :)
-    });
-
-    message.on('close', () => {
-      setTimeout(() => {
-        res.status(200).json({});
-      }, 1000);
-    });
-  });
+  res.status(200).json({});
 };

packages/nextjs/test/integration/test/server/tracingHttp.test.ts

@@ -1,14 +1,10 @@
-import nock from 'nock';
 import { NextTestEnv } from './utils/helpers';
 
 describe('Tracing HTTP', () => {
   it('should capture a transaction', async () => {
     const env = await NextTestEnv.init();
     const url = `${env.url}/api/http`;
 
-    // this intercepts the outgoing request made by the route handler (which it makes in order to test span creation)
-    nock('http://example.com/').get('/').reply(200, 'ok');
-
     const envelopes = await env.getMultipleEnvelopeRequest({
       url,
       envelopeType: 'transaction',
@@ -34,16 +30,6 @@ describe('Tracing HTTP', () => {
           },
         },
       },
-      spans: [
-        {
-          description: 'GET http://example.com/',
-          op: 'http.client',
-          status: 'ok',
-          data: {
-            'http.response.status_code': 200,
-          },
-        },
-      ],
       transaction: 'GET /api/http',
       transaction_info: {
         source: 'route',