Add integration tests

Luca Forstner · Luca Forstner · commit 674f58ee6528 · 2023-01-17T15:31:22.000Z
diff --git a/packages/nextjs/test/integration/.vscode/settings.json b/packages/nextjs/test/integration/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
diff --git a/packages/nextjs/test/integration/app/clientcomponent/layout.tsx b/packages/nextjs/test/integration/app/clientcomponent/layout.tsx
@@ -0,0 +1,3 @@
+export default function ({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
diff --git a/packages/nextjs/test/integration/app/clientcomponent/page.tsx b/packages/nextjs/test/integration/app/clientcomponent/page.tsx
@@ -0,0 +1,5 @@
+'use client';
+
+export default function () {
+  return <p>I am a client component!</p>;
+}
diff --git a/packages/nextjs/test/integration/app/servercomponent/layout.tsx b/packages/nextjs/test/integration/app/servercomponent/layout.tsx
@@ -0,0 +1,3 @@
+export default function ({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
diff --git a/packages/nextjs/test/integration/app/servercomponent/page.tsx b/packages/nextjs/test/integration/app/servercomponent/page.tsx
@@ -0,0 +1,3 @@
+export default async function () {
+  return <p>I am a server component!</p>;
+}
diff --git a/packages/nextjs/test/integration/next12.config.template b/packages/nextjs/test/integration/next12.config.template
@@ -0,0 +1,26 @@
+const { withSentryConfig } = require('@sentry/nextjs');
+
+// NOTE: This will be used by integration tests to distinguish between Webpack 4 and Webpack 5
+const moduleExports = {
+  webpack5: %RUN_WEBPACK_5%,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  pageExtensions: ['jsx', 'js', 'tsx', 'ts', 'page.tsx'],
+  sentry: {
+    // Suppress the warning message from `handleSourcemapHidingOptionWarning` in `src/config/webpack.ts`
+    // TODO (v8): This can come out in v8, because this option will get a default value
+    hideSourceMaps: false,
+    excludeServerRoutes: [
+      '/api/excludedEndpoints/excludedWithString',
+      /\/api\/excludedEndpoints\/excludedWithRegExp/,
+    ],
+  },
+};
+
+const SentryWebpackPluginOptions = {
+  dryRun: true,
+  silent: true,
+};
+
+module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);
diff --git a/packages/nextjs/test/integration/next13.config.template b/packages/nextjs/test/integration/next13.config.template
@@ -0,0 +1,29 @@
+const { withSentryConfig } = require('@sentry/nextjs');
+
+// NOTE: This will be used by integration tests to distinguish between Webpack 4 and Webpack 5
+const moduleExports = {
+  webpack5: %RUN_WEBPACK_5%,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  experimental: {
+    appDir: Number(process.env.NODE_MAJOR) >= 16, // experimental.appDir requires Node v16.8.0 or later.
+  },
+  pageExtensions: ['jsx', 'js', 'tsx', 'ts', 'page.tsx'],
+  sentry: {
+    // Suppress the warning message from `handleSourcemapHidingOptionWarning` in `src/config/webpack.ts`
+    // TODO (v8): This can come out in v8, because this option will get a default value
+    hideSourceMaps: false,
+    excludeServerRoutes: [
+      '/api/excludedEndpoints/excludedWithString',
+      /\/api\/excludedEndpoints\/excludedWithRegExp/,
+    ],
+  },
+};
+
+const SentryWebpackPluginOptions = {
+  dryRun: true,
+  silent: true,
+};
+
+module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);
diff --git a/packages/nextjs/test/integration/pages/api/broken/index.ts b/packages/nextjs/test/integration/pages/api/broken/index.ts
@@ -1,8 +1,8 @@
-import { withSentry } from '@sentry/nextjs';
+import { wrapApiHandlerWithSentry } from '@sentry/nextjs';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 const handler = async (_req: NextApiRequest, res: NextApiResponse): Promise<void> => {
   res.status(500).json({ statusCode: 500, message: 'Something went wrong' });
 };
 
-export default withSentry(handler);
+export default wrapApiHandlerWithSentry(handler, '/api/broken');
diff --git a/packages/nextjs/test/integration/pages/api/error/index.ts b/packages/nextjs/test/integration/pages/api/error/index.ts
@@ -1,8 +1,8 @@
-import { withSentry } from '@sentry/nextjs';
+import { wrapApiHandlerWithSentry } from '@sentry/nextjs';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 const handler = async (_req: NextApiRequest, _res: NextApiResponse): Promise<void> => {
   throw new Error('API Error');
 };
 
-export default withSentry(handler);
+export default wrapApiHandlerWithSentry(handler, '/api/error');
diff --git a/packages/nextjs/test/integration/pages/api/http/index.ts b/packages/nextjs/test/integration/pages/api/http/index.ts
@@ -1,4 +1,4 @@
-import { withSentry } from '@sentry/nextjs';
+import { wrapApiHandlerWithSentry } from '@sentry/nextjs';
 import { get } from 'http';
 import { NextApiRequest, NextApiResponse } from 'next';
 
@@ -9,4 +9,4 @@ const handler = async (_req: NextApiRequest, res: NextApiResponse): Promise<void
   res.status(200).json({});
 };
 
-export default withSentry(handler);
+export default wrapApiHandlerWithSentry(handler, '/api/http');
diff --git a/packages/nextjs/test/integration/pages/api/users/index.ts b/packages/nextjs/test/integration/pages/api/users/index.ts
@@ -1,4 +1,4 @@
-import { withSentry } from '@sentry/nextjs';
+import { wrapApiHandlerWithSentry } from '@sentry/nextjs';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 import { sampleUserData } from '../../../utils/sample-data';
@@ -15,4 +15,4 @@ const handler = async (_req: NextApiRequest, res: NextApiResponse): Promise<void
   }
 };
 
-export default withSentry(handler);
+export default wrapApiHandlerWithSentry(handler, '/api/users');
diff --git a/packages/nextjs/test/integration/pages/api/wrapApiHandlerWithSentry/wrapped/[...pathParts].ts b/packages/nextjs/test/integration/pages/api/wrapApiHandlerWithSentry/wrapped/[...pathParts].ts
@@ -1,8 +1,8 @@
-import { withSentry } from '@sentry/nextjs';
+import { wrapApiHandlerWithSentry } from '@sentry/nextjs';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 const handler = async (_req: NextApiRequest, res: NextApiResponse): Promise<void> => {
   res.status(200).json({});
 };
 
-export default withSentry(handler);
+export default wrapApiHandlerWithSentry(handler, '/api/wrapApiHandlerWithSentry/wrapped/[...pathParts]');
diff --git a/packages/nextjs/test/integration/pages/api/wrapApiHandlerWithSentry/wrapped/[animal].ts b/packages/nextjs/test/integration/pages/api/wrapApiHandlerWithSentry/wrapped/[animal].ts
@@ -1,8 +1,8 @@
-import { withSentry } from '@sentry/nextjs';
+import { wrapApiHandlerWithSentry } from '@sentry/nextjs';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 const handler = async (_req: NextApiRequest, res: NextApiResponse): Promise<void> => {
   res.status(200).json({});
 };
 
-export default withSentry(handler);
+export default wrapApiHandlerWithSentry(handler, '/api/wrapApiHandlerWithSentry/wrapped/[animal]');
diff --git a/packages/nextjs/test/integration/pages/api/wrapApiHandlerWithSentry/wrapped/noParams.ts b/packages/nextjs/test/integration/pages/api/wrapApiHandlerWithSentry/wrapped/noParams.ts
@@ -1,8 +1,8 @@
-import { withSentry } from '@sentry/nextjs';
+import { wrapApiHandlerWithSentry } from '@sentry/nextjs';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 const handler = async (_req: NextApiRequest, res: NextApiResponse): Promise<void> => {
   res.status(200).json({});
 };
 
-export default withSentry(handler);
+export default wrapApiHandlerWithSentry(handler, '/api/wrapApiHandlerWithSentry/wrapped/noParams');
diff --git a/packages/nextjs/test/integration/sentry.edge.config.js b/packages/nextjs/test/integration/sentry.edge.config.js
@@ -0,0 +1,7 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  tracesSampleRate: 1,
+  debug: process.env.SDK_DEBUG,
+});
diff --git a/packages/nextjs/test/integration/test/client/appDirTracingPageloadClientcomponent.js b/packages/nextjs/test/integration/test/client/appDirTracingPageloadClientcomponent.js
@@ -0,0 +1,23 @@
+const { expectRequestCount, isTransactionRequest, expectTransaction } = require('../utils/client');
+
+module.exports = async ({ page, url, requests }) => {
+  if (Number(process.env.NEXTJS_VERSION) < 13 || Number(process.env.NODE_MAJOR) < 16) {
+    // Next.js versions < 13 don't support the app directory and the app dir requires Node v16.8.0 or later.
+    return;
+  }
+
+  const requestPromise = page.waitForRequest(isTransactionRequest);
+  await page.goto(`${url}/clientcomponent`);
+  await requestPromise;
+
+  expectTransaction(requests.transactions[0], {
+    contexts: {
+      trace: {
+        op: 'pageload',
+      },
+    },
+    transaction: '/clientcomponent',
+  });
+
+  await expectRequestCount(requests, { transactions: 1 });
+};
diff --git a/packages/nextjs/test/integration/test/client/appDirTracingPageloadServercomponent.js b/packages/nextjs/test/integration/test/client/appDirTracingPageloadServercomponent.js
@@ -0,0 +1,23 @@
+const { expectRequestCount, isTransactionRequest, expectTransaction } = require('../utils/client');
+
+module.exports = async ({ page, url, requests }) => {
+  if (Number(process.env.NEXTJS_VERSION) < 13 || Number(process.env.NODE_MAJOR) < 16) {
+    // Next.js versions < 13 don't support the app directory and the app dir requires Node v16.8.0 or later.
+    return;
+  }
+
+  const requestPromise = page.waitForRequest(isTransactionRequest);
+  await page.goto(`${url}/servercomponent`);
+  await requestPromise;
+
+  expectTransaction(requests.transactions[0], {
+    contexts: {
+      trace: {
+        op: 'pageload',
+      },
+    },
+    transaction: '/servercomponent',
+  });
+
+  await expectRequestCount(requests, { transactions: 1 });
+};
diff --git a/packages/nextjs/test/integration/test/client/sessionCrashed.js b/packages/nextjs/test/integration/test/client/sessionCrashed.js
@@ -1,24 +1,27 @@
-const { waitForAll } = require('../utils/common');
-const { expectRequestCount, isSessionRequest, expectSession } = require('../utils/client');
+const { expectRequestCount, isSessionRequest, expectSession, extractEnvelopeFromRequest } = require('../utils/client');
 
 module.exports = async ({ page, url, requests }) => {
-  await waitForAll([
-    page.goto(`${url}/crashed`),
-    page.waitForRequest(isSessionRequest),
-    page.waitForRequest(isSessionRequest),
-  ]);
-
-  expectSession(requests.sessions[0], {
-    init: true,
-    status: 'ok',
-    errors: 0,
+  const sessionRequestPromise1 = page.waitForRequest(request => {
+    if (isSessionRequest(request)) {
+      const { item } = extractEnvelopeFromRequest(request);
+      return item.init === true && item.status === 'ok' && item.errors === 0;
+    } else {
+      return false;
+    }
   });
 
-  expectSession(requests.sessions[1], {
-    init: false,
-    status: 'crashed',
-    errors: 1,
+  const sessionRequestPromise2 = page.waitForRequest(request => {
+    if (isSessionRequest(request)) {
+      const { item } = extractEnvelopeFromRequest(request);
+      return item.init === false && item.status === 'crashed' && item.errors === 1;
+    } else {
+      return false;
+    }
   });
 
+  await page.goto(`${url}/crashed`);
+  await sessionRequestPromise1;
+  await sessionRequestPromise2;
+
   await expectRequestCount(requests, { sessions: 2 });
 };
diff --git a/packages/nextjs/test/integration/tsconfig.json b/packages/nextjs/test/integration/tsconfig.json
@@ -6,10 +6,7 @@
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "lib": [
-      "dom",
-      "es2017"
-    ],
+    "lib": ["dom", "es2017"],
     "module": "esnext",
     "moduleResolution": "node",
     "noEmit": true,
@@ -20,13 +17,13 @@
     "skipLibCheck": true,
     "strict": true,
     "target": "esnext",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "exclude": [
-    "node_modules"
-  ],
-  "include": [
-    "**/*.ts",
-    "**/*.tsx"
-  ]
+  "exclude": ["node_modules"],
+  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"]
 }
diff --git a/packages/nextjs/test/run-integration-tests.sh b/packages/nextjs/test/run-integration-tests.sh
@@ -107,8 +107,12 @@ for NEXTJS_VERSION in 10 11 12 13; do
     # next 10 defaults to webpack 4 and next 11 defaults to webpack 5, but each can use either based on settings
     if [ "$NEXTJS_VERSION" -eq "10" ]; then
       sed "s/%RUN_WEBPACK_5%/$RUN_WEBPACK_5/g" <next10.config.template >next.config.js
-    else
+    elif [ "$NEXTJS_VERSION" -eq "11" ]; then
       sed "s/%RUN_WEBPACK_5%/$RUN_WEBPACK_5/g" <next11.config.template >next.config.js
+    elif [ "$NEXTJS_VERSION" -eq "12" ]; then
+      sed "s/%RUN_WEBPACK_5%/$RUN_WEBPACK_5/g" <next12.config.template >next.config.js
+    elif [ "$NEXTJS_VERSION" -eq "13" ]; then
+      sed "s/%RUN_WEBPACK_5%/$RUN_WEBPACK_5/g" <next13.config.template >next.config.js
     fi
 
     echo "[nextjs@$NEXTJS_VERSION | webpack@$WEBPACK_VERSION] Building..."

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "typescript.tsdk": "node_modules/typescript/lib",
 +  "typescript.enablePromptUseWorkspaceTsdk": true
 +}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function ({ children }: { children: React.ReactNode }) {`
	`2`	`+ return <>{children}</>;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default async function () {`
	`2`	`+ return <p>I am a server component!</p>;`
	`3`	`+}`