test(nuxt): Use sentry.server.config.ts in E2E tests (#13999)

The E2E tests still used an `instrument` file in the `public` folder
(which is not the way to setup the SDK anymore) because
`import-in-the-middle/hook.mjs` was not available and threw an error. To
be able to properly test the setup with `sentry.server.config.ts`, a
function was added that copies the `import-in-the-middle` folder to the
build output to include all files.

Author: s1gr1d

dev-packages/e2e-tests/test-applications/nuxt-3/copyIITM.bash

@@ -0,0 +1,7 @@
+# This script copies the `import-in-the-middle` content of the E2E test project root `node_modules` to the build output `node_modules`
+# For some reason, some files are missing in the output (like `hook.mjs`) and this is not reproducible in external, standalone projects.
+#
+# Things we tried (that did not fix the problem):
+# - Adding a resolution for `@vercel/nft` v0.27.0 (this worked in the standalone project)
+# - Also adding `@vercel/nft` v0.27.0 to pnpm `peerDependencyRules`
+cp -r node_modules/.pnpm/import-in-the-middle@1.*/node_modules/import-in-the-middle .output/server/node_modules/import-in-the-middle

dev-packages/e2e-tests/test-applications/nuxt-3/nuxt.config.ts

@@ -11,4 +11,10 @@ export default defineNuxtConfig({
       },
     },
   },
+  nitro: {
+    rollupConfig: {
+      // @sentry/... is set external to prevent bundling all of Sentry into the `runtime.mjs` file in the build output
+      external: [/@sentry\/.*/],
+    },
+  },
 });

dev-packages/e2e-tests/test-applications/nuxt-3/package.json

@@ -3,10 +3,11 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "nuxt build",
+    "build": "nuxt build && bash ./copyIITM.bash",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
-    "preview": "NODE_OPTIONS='--import ./public/instrument.server.mjs' nuxt preview",
+    "preview": "nuxt preview",
+    "start": "node --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs",
     "clean": "npx nuxi cleanup",
     "test": "playwright test",
     "test:build": "pnpm install && npx playwright install && pnpm build",
@@ -20,5 +21,8 @@
     "@nuxt/test-utils": "^3.14.1",
     "@playwright/test": "^1.44.1",
     "@sentry-internal/test-utils": "link:../../../test-utils"
+  },
+  "overrides": {
+    "@vercel/nft": "0.27.4"
   }
 }

dev-packages/e2e-tests/test-applications/nuxt-3/playwright.config.ts

@@ -12,7 +12,7 @@ const nuxtConfigOptions: ConfigOptions = {
  *  Like this: import { expect, test } from '@nuxt/test-utils/playwright' */
 
 const config = getPlaywrightConfig({
-  startCommand: `pnpm preview`,
+  startCommand: `pnpm start`,
   use: { ...nuxtConfigOptions },
 });
 

dev-packages/e2e-tests/test-applications/nuxt-3/public/instrument.server.mjs renamed to dev-packages/e2e-tests/test-applications/nuxt-3/sentry.server.config.ts

@@ -0,0 +1,7 @@
+# This script copies the `import-in-the-middle` content of the E2E test project root `node_modules` to the build output `node_modules`
+# For some reason, some files are missing in the output (like `hook.mjs`) and this is not reproducible in external, standalone projects.
+#
+# Things we tried (that did not fix the problem):
+# - Adding a resolution for `@vercel/nft` v0.27.0 (this worked in the standalone project)
+# - Also adding `@vercel/nft` v0.27.0 to pnpm `peerDependencyRules`
+cp -r node_modules/.pnpm/import-in-the-middle@1.*/node_modules/import-in-the-middle .output/server/node_modules/import-in-the-middle

dev-packages/e2e-tests/test-applications/nuxt-4/copyIITM.bash

@@ -13,4 +13,10 @@ export default defineNuxtConfig({
       },
     },
   },
+  nitro: {
+    rollupConfig: {
+      // @sentry/... is set external to prevent bundling all of Sentry into the `runtime.mjs` file in the build output
+      external: [/@sentry\/.*/],
+    },
+  },
 });

dev-packages/e2e-tests/test-applications/nuxt-4/nuxt.config.ts

@@ -3,10 +3,11 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "nuxt build",
+    "build": "nuxt build && bash ./copyIITM.bash",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
-    "preview": "NODE_OPTIONS='--import ./public/instrument.server.mjs' nuxt preview",
+    "preview": "nuxt preview",
+    "start": "node --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs",
     "clean": "npx nuxi cleanup",
     "test": "playwright test",
     "test:build": "pnpm install && npx playwright install && pnpm build",
@@ -20,5 +21,8 @@
     "@nuxt/test-utils": "^3.14.2",
     "@playwright/test": "^1.44.1",
     "@sentry-internal/test-utils": "link:../../../test-utils"
+  },
+  "overrides": {
+    "@vercel/nft": "0.27.4"
   }
 }

dev-packages/e2e-tests/test-applications/nuxt-4/package.json

@@ -12,7 +12,7 @@ const nuxtConfigOptions: ConfigOptions = {
  *  Like this: import { expect, test } from '@nuxt/test-utils/playwright' */
 
 const config = getPlaywrightConfig({
-  startCommand: `pnpm preview`,
+  startCommand: `pnpm start`,
   use: { ...nuxtConfigOptions },
 });
 

dev-packages/e2e-tests/test-applications/nuxt-4/playwright.config.ts

@@ -1,4 +1,4 @@
-import { expect, test } from '@nuxt/test-utils/playwright';
+import { expect, test } from '@playwright/test';
 import { waitForError } from '@sentry-internal/test-utils';
 
 test.describe('client-side errors', async () => {

dev-packages/e2e-tests/test-applications/nuxt-4/public/instrument.server.mjs renamed to dev-packages/e2e-tests/test-applications/nuxt-4/sentry.server.config.ts

@@ -1,4 +1,4 @@
-import { expect, test } from '@nuxt/test-utils/playwright';
+import { expect, test } from '@playwright/test';
 import { waitForTransaction } from '@sentry-internal/test-utils';
 import type { Span } from '@sentry/nuxt';