test(nextjs): Streamline integration tests (#6839)

Author: lforst

.github/workflows/build.yml

@@ -485,6 +485,30 @@ jobs:
         with:
           path: ${{ env.CACHED_BUILD_PATHS }}
           key: ${{ env.BUILD_CACHE_KEY }}
+      - name: Get npm cache directory
+        id: npm-cache-dir
+        run: |
+          echo "::set-output name=dir::$(npm config get cache)"
+      - name: Get Playwright version
+        id: playwright-version
+        run: |
+          echo "::set-output name=version::$(node -p "require('@playwright/test/package.json').version")"
+      - uses: actions/cache@v3
+        name: Check if Playwright browser is cached
+        id: playwright-cache
+        with:
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-Playwright-${{steps.playwright-version.outputs.version}}
+      - name: Install Playwright browser if not cached
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        continue-on-error: true # playwright needs node >= 14
+        run: npx playwright install --with-deps
+        env:
+          PLAYWRIGHT_BROWSERS_PATH: ${{steps.npm-cache-dir.outputs.dir}}
+      - name: Install OS dependencies of Playwright if cache hit
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+        continue-on-error: true # playwright needs node >= 14
+        run: npx playwright install-deps
       - name: Run tests
         env:
           NODE_VERSION: ${{ matrix.node }}

packages/nextjs/package.json

@@ -68,11 +68,8 @@
     "test:build": "yarn ts-node test/buildProcess/runTest.ts",
     "test:unit": "jest",
     "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:client": "yarn playwright test test/integration/test/client/",
     "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",

packages/nextjs/playwright.config.ts

@@ -1,14 +1,16 @@
 import type { PlaywrightTestConfig } from '@playwright/test';
+import * as path from 'path';
 
 const config: PlaywrightTestConfig = {
-  retries: 2,
+  retries: 0, // We do not accept flakes.
   timeout: 12000,
   use: {
     baseURL: 'http://localhost:3000',
   },
   workers: 3,
   webServer: {
-    command: 'yarn test:integration:prepare',
+    cwd: path.join(__dirname, 'test', 'integration'),
+    command: 'yarn start',
     port: 3000,
   },
 };

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

@@ -28,17 +28,21 @@ test('should correctly instrument `fetch` for performance tracing', async ({ pag
   });
 
   // @ts-ignore - We know that `spans` is inside Transaction envelopes
-  expect(transaction[0].spans[0]).toMatchObject({
-    data: { method: 'GET', url: 'http://example.com', type: 'fetch' },
-    description: 'GET http://example.com',
-    op: 'http.client',
-    parent_span_id: expect.any(String),
-    span_id: expect.any(String),
-    start_timestamp: expect.any(Number),
-    timestamp: expect.any(Number),
-    trace_id: expect.any(String),
-    status: expect.any(String),
-  });
+  expect(transaction[0].spans).toEqual(
+    expect.arrayContaining([
+      expect.objectContaining({
+        data: { method: 'GET', url: 'http://example.com', type: 'fetch' },
+        description: 'GET http://example.com',
+        op: 'http.client',
+        parent_span_id: expect.any(String),
+        span_id: expect.any(String),
+        start_timestamp: expect.any(Number),
+        timestamp: expect.any(Number),
+        trace_id: expect.any(String),
+        status: expect.any(String),
+      }),
+    ]),
+  );
 
   expect(await countEnvelopes(page, { url: '/fetch', envelopeType: 'transaction', timeout: 2500 })).toBe(1);
 });