Cover 1st-party examples with tests (#45270)Co-authored-by: kodiakhq[…

…bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Tim Neutkens <tim@timneutkens.nl> We want to make sure that our examples are not breaking. We don't want to be slowed down by broken 3rd party packages, but we need to ensure that examples covering next.js features are always green. Added as a standalone workflow that doesn't parallelize. It will just run on a cron schedule, so we can check for current status. We can add Slack ping later if we need to. The workflow tests just that our examples can build, so mostly TS issues. We could definitely follow up with actual tests, but that is not as low-hanging. --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
vercel · Feb 27, 2023 · f3ef4e9 · f3ef4e9
1 parent 65ce868
commit f3ef4e9
Show file tree

Hide file tree

Showing 6 changed files with 175 additions and 10 deletions.
diff --git a/.github/workflows/test_examples.yml b/.github/workflows/test_examples.yml
@@ -0,0 +1,52 @@
+# This file duplicates bunch of things from build_test_deploy
+
+on:
+  workflow_dispatch:
+    inputs:
+      is_dispatched:
+        description: 'Leave this option enabled'
+        required: true
+        default: true
+        type: boolean
+  schedule:
+    - cron: '0 */4 * * *'
+
+name: Test examples
+
+env:
+  PNPM_VERSION: 7.24.3
+
+jobs:
+  testExamples:
+    # Don't execute using cron on forks
+    if: (github.repository == 'vercel/next.js') || (inputs.is_dispatched == true)
+    name: Test Examples
+    runs-on: ubuntu-latest
+    timeout-minutes: 120
+    env:
+      NEXT_TELEMETRY_DISABLED: 1
+    strategy:
+      fail-fast: false
+      matrix:
+        node: [16, 18]
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 25
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          check-latest: true
+
+      - run: npm i -g pnpm@${PNPM_VERSION}
+
+      - run: pnpm install
+      - run: pnpm build
+
+      - run: docker run --rm -v $(pwd):/work mcr.microsoft.com/playwright:v1.28.1-focal /bin/bash -c "cd /work && curl -s https://install-node.vercel.app/v${{ matrix.node }} | FORCE=1 bash && node -v && npm i -g pnpm@${PNPM_VERSION} > /dev/null && NEXT_TEST_JOB=1 NEXT_TEST_MODE=start xvfb-run node run-tests.js --type examples >> /proc/1/fd/1"
+        name: Run test/examples
diff --git a/examples/using-router/package.json b/examples/using-router/package.json
@@ -7,7 +7,10 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "latest",
+    "react-dom": "latest",
+    "typescript": "latest",
+    "@types/react": "latest",
+    "@types/node": "latest"
   }
 }
diff --git a/examples/with-typescript-types/package.json b/examples/with-typescript-types/package.json
@@ -8,13 +8,13 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "latest",
+    "react-dom": "latest"
   },
   "devDependencies": {
-    "@types/node": "^12.12.21",
-    "@types/react": "^16.9.16",
-    "@types/react-dom": "^16.9.4",
-    "typescript": "4.0"
+    "@types/node": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "typescript": "4.9.4"
   }
 }
diff --git a/examples/with-web-worker/pages/index.tsx b/examples/with-web-worker/pages/index.tsx
@@ -8,12 +8,12 @@ export default function Index() {
     workerRef.current.onmessage = (event: MessageEvent<number>) =>
       alert(`WebWorker Response => ${event.data}`)
     return () => {
-      workerRef.current.terminate()
+      workerRef.current?.terminate()
     }
   }, [])
 
   const handleWork = useCallback(async () => {
-    workerRef.current.postMessage(100000)
+    workerRef.current?.postMessage(100000)
   }, [])
 
   return (

diff --git a/run-tests.js b/run-tests.js
@@ -40,6 +40,7 @@ const testFilters = {
   e2e: 'e2e/',
   production: 'production/',
   development: 'development/',
+  examples: 'examples/',
 }
 
 const mockTrace = () => ({
@@ -121,6 +122,10 @@ async function main() {
       filterTestsBy = testFilters.e2e
       break
     }
+    case 'examples': {
+      filterTestsBy = testFilters.examples
+      break
+    }
     case 'all':
       filterTestsBy = 'none'
       break

diff --git a/test/examples/examples.test.ts b/test/examples/examples.test.ts
@@ -0,0 +1,105 @@
+import { createNextDescribe } from 'e2e-utils'
+import path from 'path'
+import fs from 'fs-extra'
+
+const testedExamples = [
+  // Internal features
+  'active-class-name',
+  'amp',
+  'amp-first',
+  'amp-story',
+  'api-routes',
+  'api-routes-cors',
+  'api-routes-middleware',
+  'api-routes-rate-limit',
+  'api-routes-rest',
+  'app-dir-i18n-routing',
+  'app-dir-mdx',
+  'basic-css',
+  'basic-export',
+  'blog',
+  'blog-starter',
+  'catch-all-routes',
+  'custom-routes-proxying',
+  'custom-server',
+  'data-fetch',
+  'dynamic-routing',
+  'environment-variables',
+  'fast-refresh-demo',
+  'head-elements',
+  'headers',
+  'hello-world',
+  'hello-world-esm',
+  'i18n-routing',
+  'image-component',
+  'image-legacy-component',
+  'layout-component',
+  'middleware',
+  'middleware-matcher',
+  'modularize-imports',
+  'nested-components',
+  'next-css',
+  'next-forms',
+  'progressive-render',
+  'redirects',
+  'remove-console',
+  'reproduction-template',
+  'rewrites',
+  'script-component',
+  'ssr-caching',
+  'styled-jsx-with-csp',
+  'svg-components',
+  'using-router',
+  'with-absolute-imports',
+  'with-app-layout',
+  'with-context-api',
+  'with-env-from-next-config-js',
+  'with-loading',
+  'with-shallow-routing',
+  'with-sitemap',
+  'with-typescript',
+  'with-typescript-types',
+  'with-web-worker',
+  'with-webassembly',
+
+  // Library integrations that we can't break
+  'with-jest',
+  'with-jest-babel',
+  'with-mdx',
+  'with-mdx-remote',
+  'with-tailwindcss',
+  'with-turbopack',
+  'with-vercel-fetch',
+]
+
+describe.each(testedExamples)(`example '%s'`, (example) => {
+  // If there is an issue during a build, jest won't tell us which example caused it
+  // we need to log it ourselfs
+  beforeAll(() => {
+    require('console').log(`Running example '${example}'`)
+  })
+
+  const exampleFiles = path.join(__dirname, '..', '..', 'examples', example)
+  const packageJson = fs.readJsonSync(path.join(exampleFiles, 'package.json'))
+  createNextDescribe(
+    `example '${example}'`,
+    {
+      files: exampleFiles,
+      dependencies: {
+        // We need to make sure that these default dependencies are not installed by default
+        // for our examples to ensure that they have all their dependencies in package.json
+        '@types/node': undefined,
+        '@types/react': undefined,
+        next: undefined,
+        react: undefined,
+        'react-dom': undefined,
+        typescript: undefined,
+        ...packageJson.dependencies,
+        ...packageJson.devDependencies,
+      },
+    },
+    () => {
+      it('builds', () => {})
+    }
+  )
+})