test(nextjs): Migrate Next SDK's client side tests to Playwright.

packages/integration-tests/utils/helpers.ts

@@ -1,6 +1,6 @@
 import type { Page, Request } from '@playwright/test';
 import type { ReplayContainer } from '@sentry/replay/build/npm/types/types';
-import type { Event, EventEnvelopeHeaders } from '@sentry/types';
+import type { EnvelopeItemType, Event, EventEnvelopeHeaders } from '@sentry/types';
 
 const envelopeUrlRegex = /\.sentry\.io\/api\/\d+\/envelope\//;
 
@@ -26,6 +26,58 @@ export const envelopeHeaderRequestParser = (request: Request | null): EventEnvel
  return envelope.split('\n').map(line => JSON.parse(line))[0];
 };
 
+export const getEnvelopeType = (request: Request | null): EnvelopeItemType => {
+ const envelope = request?.postData() || '';
+
+ return (envelope.split('\n').map(line => JSON.parse(line))[1] as Record<string, unknown>).type as EnvelopeItemType;
+};
+
+export const countEnvelopes = async (
+ page: Page,
+ options?: {
+ url?: string;
+ timeout?: number;
+ envelopeType: EnvelopeItemType | EnvelopeItemType[];
+ },
+): Promise<number> => {
+ const countPromise = new Promise<number>((resolve, reject) => {
+ let reqCount = 0;
+
+ const requestHandler = (request: Request): void => {
+ if (envelopeUrlRegex.test(request.url())) {
+ try {
+ if (options?.envelopeType) {
+ const envelopeTypeArray = options
+ ? typeof options.envelopeType === 'string'
+ ? [options.envelopeType]
+ : options.envelopeType || (['event'] as EnvelopeItemType[])
+ : (['event'] as EnvelopeItemType[]);
+
+ if (envelopeTypeArray.includes(getEnvelopeType(request))) {
+ reqCount++;
+ }
+ }
+ } catch (e) {
+ reject(e);
+ }
+ }
+ };
+
+ page.on('request', requestHandler);
+
+ setTimeout(() => {
+ page.off('request', requestHandler);
+ resolve(reqCount);
+ }, options?.timeout || 1000);
+ });
+
+ if (options?.url) {
+ await page.goto(options.url);
+ }
+
+ return countPromise;
+};
+
 /**
  * Run script at the given path inside the test environment.
  *
@@ -76,6 +128,7 @@ async function getMultipleRequests<T>(
  options?: {
  url?: string;
  timeout?: number;
+ envelopeType?: EnvelopeItemType | EnvelopeItemType[];
  },
 ): Promise<T[]> {
  const requests: Promise<T[]> = new Promise((resolve, reject) => {
@@ -86,6 +139,18 @@ async function getMultipleRequests<T>(
  function requestHandler(request: Request): void {
  if (urlRgx.test(request.url())) {
  try {
+ if (options?.envelopeType) {
+ const envelopeTypeArray = options
+ ? typeof options.envelopeType === 'string'
+ ? [options.envelopeType]
+ : options.envelopeType || (['event'] as EnvelopeItemType[])
+ : (['event'] as EnvelopeItemType[]);
+
+ if (!envelopeTypeArray.includes(getEnvelopeType(request))) {
+ return;
+ }
+ }
+
  reqCount--;
  requestData.push(requestParser(request));
 
@@ -127,11 +192,10 @@ async function getMultipleSentryEnvelopeRequests<T>(
  options?: {
  url?: string;
  timeout?: number;
+ envelopeType?: EnvelopeItemType | EnvelopeItemType[];
  },
  requestParser: (req: Request) => T = envelopeRequestParser as (req: Request) => T,
 ): Promise<T[]> {
- // TODO: This is not currently checking the type of envelope, just casting for now.
- // We can update this to include optional type-guarding when we have types for Envelope.
  return getMultipleRequests<T>(page, count, envelopeUrlRegex, requestParser, options) as Promise<T[]>;
 }
 

packages/nextjs/.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
  parserOptions: {
  jsx: true,
  },
- ignorePatterns: ['test/integration/**'],
+ ignorePatterns: ['test/integration/**', 'playwright.config.ts'],
  extends: ['../../.eslintrc.js'],
  rules: {
  '@sentry-internal/sdk/no-optional-chaining': 'off',

packages/nextjs/jest.config.js

@@ -4,5 +4,5 @@ module.exports = {
  ...baseConfig,
  // This prevents the build tests from running when unit tests run. (If they do, they fail, because the build being
  // tested hasn't necessarily run yet.)
- testPathIgnorePatterns: ['<rootDir>/test/buildProcess/'],
+ testPathIgnorePatterns: ['<rootDir>/test/buildProcess/', '<rootDir>/test/integration/'],
 };

packages/nextjs/package.json

@@ -67,7 +67,13 @@
  "test:all": "run-s test:unit test:integration test:build",
  "test:build": "yarn ts-node test/buildProcess/runTest.ts",
  "test:unit": "jest",
- "test:integration": "test/run-integration-tests.sh && yarn test:types",
+ "test:integration": "./test/run-integration-tests.sh && yarn test:types",
+ "test:integration:ci": "run-s test:integration:clean test:integration:client:ci test:integration:server",
+ "test:integration:prepare": "(cd test/integration && yarn build && yarn start)",
+ "test:integration:clean": "(cd test/integration && rimraf .cache node_modules build)",
+ "test:integration:client": "yarn playwright install-deps && yarn playwright test test/integration/test/client/",
+ "test:integration:client:ci": "yarn test:integration:client --browser='all' --reporter='line'",
+ "test:integration:server": "export NODE_OPTIONS='--stack-trace-limit=25' && jest --config=test/integration/jest.config.js test/integration/test/server/",
  "test:types": "cd test/types && yarn test",
  "test:watch": "jest --watch",
  "vercel:branch": "source vercel/set-up-branch-for-test-app-use.sh",

packages/nextjs/playwright.config.ts

@@ -0,0 +1,16 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+ retries: 2,
+ timeout: 12000,
+ use: {
+ baseURL: 'http://localhost:3000',
+ },
+ workers: 3,
+ webServer: {
+ command: 'yarn test:integration:prepare',
+ port: 3000,
+ },
+};
+
+export default config;

packages/nextjs/test/integration/package.json

@@ -5,7 +5,9 @@
  "dev": "next",
  "build": "next build",
  "predebug": "source ../integration_test_utils.sh && link_monorepo_packages '../../..' && yarn build",
- "start": "next start"
+ "start": "next start",
+ "pretest": "run-s build",
+ "test": "playwright test"
  },
  "dependencies": {
  "@sentry/nextjs": "file:../../",
@@ -15,11 +17,9 @@
  },
  "devDependencies": {
  "@types/node": "^15.3.1",
- "@types/puppeteer": "^5.4.3",
  "@types/react": "17.0.47",
  "@types/react-dom": "17.0.17",
  "nock": "^13.1.0",
- "puppeteer": "^9.1.1",
  "typescript": "^4.2.4",
  "yargs": "^16.2.0"
  },

packages/nextjs/test/integration/test/client/errorClick.test.ts

@@ -0,0 +1,17 @@
+import { getMultipleSentryEnvelopeRequests } from './utils/helpers';
+import { test, expect } from '@playwright/test';
+import { Event } from '@sentry/types';
+
+test('should capture error triggered on click', async ({ page }) => {
+ await page.goto('/errorClick');
+
+ const [_, events] = await Promise.all([
+ page.click('button'),
+ getMultipleSentryEnvelopeRequests<Event>(page, 1, { envelopeType: 'event' }),
+ ]);
+
+ expect(events[0].exception?.values?.[0]).toMatchObject({
+ type: 'Error',
+ value: 'Sentry Frontend Error',
+ });
+});

packages/nextjs/test/integration/test/client/errorGlobal.test.ts

@@ -0,0 +1,12 @@
+import { getMultipleSentryEnvelopeRequests } from './utils/helpers';
+import { test, expect } from '@playwright/test';
+import { Event } from '@sentry/types';
+
+test('should capture a globally triggered event', async ({ page }) => {
+ const event = await getMultipleSentryEnvelopeRequests<Event>(page, 1, { url: '/crashed', envelopeType: 'event' });
+
+ expect(event[0].exception?.values?.[0]).toMatchObject({
+ type: 'Error',
+ value: 'Crashed',
+ });
+});

packages/nextjs/test/integration/test/client/faultyAppGetInitialPropsConfiguration.test.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+
+// This test verifies that a faulty configuration of `getInitialProps` in `_app` will not cause our
+// auto - wrapping / instrumentation to throw an error.
+// See `_app.tsx` for more information.
+
+test('should not fail auto-wrapping when `getInitialProps` configuration is faulty.', async ({ page }) => {
+ await page.goto('/faultyAppGetInitialProps');
+
+ const serverErrorText = await page.$('//*[contains(text(), "Internal Server Error")]');
+
+ expect(serverErrorText).toBeFalsy();
+});

packages/nextjs/test/integration/test/client/reportDialog.js → packages/nextjs/test/integration/test/client/reportDialog.test.ts

@@ -1,7 +1,7 @@
-const assert = require('assert');
+import { test, expect } from '@playwright/test';
 
-module.exports = async ({ page, url }) => {
- await page.goto(`${url}/reportDialog`);
+test('should show a dialog', async ({ page }) => {
+ await page.goto('/reportDialog');
 
  await page.click('button');
 
@@ -10,5 +10,5 @@ module.exports = async ({ page, url }) => {
  const dialogScript = await page.waitForSelector(dialogScriptSelector, { state: 'attached' });
  const dialogScriptSrc = await (await dialogScript.getProperty('src')).jsonValue();
 
-assert(dialogScriptSrc.startsWith('https://dsn.ingest.sentry.io/api/embed/error-page/?'));
-};
+expect(dialogScriptSrc).toMatch(/^https:\/\/dsn\.ingest\.sentry\.io\/api\/embed\/error-page\/\?.*/);
+});

packages/nextjs/test/integration/test/client/sessionCrashed.test.ts

@@ -0,0 +1,21 @@
+import { countEnvelopes, getMultipleSentryEnvelopeRequests } from './utils/helpers';
+import { test, expect } from '@playwright/test';
+import { Session } from '@sentry/types';
+
+test('should report crashed sessions', async ({ page }) => {
+ const event = await getMultipleSentryEnvelopeRequests<Session>(page, 2, { url: '/crashed', envelopeType: 'session' });
+
+ expect(event[0]).toMatchObject({
+ init: true,
+ status: 'ok',
+ errors: 0,
+ });
+
+ expect(event[1]).toMatchObject({
+ init: false,
+ status: 'crashed',
+ errors: 1,
+ });
+
+ expect(await countEnvelopes(page, { url: '/crashed', envelopeType: 'session' })).toBe(2);
+});