Cover 1st-party examples with tests

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"
   }
 }

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"
   }
 }

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 (

test/e2e/examples/batch0.test.ts

@@ -0,0 +1,4 @@
+import { getExamplesBatch } from './getExamples'
+import { testExample } from './testExample'
+
+getExamplesBatch(0).forEach(testExample)

test/e2e/examples/batch1.test.ts

@@ -0,0 +1,4 @@
+import { getExamplesBatch } from './getExamples'
+import { testExample } from './testExample'
+
+getExamplesBatch(1).forEach(testExample)

test/e2e/examples/batch2.test.ts

@@ -0,0 +1,4 @@
+import { getExamplesBatch } from './getExamples'
+import { testExample } from './testExample'
+
+getExamplesBatch(2).forEach(testExample)

test/e2e/examples/batch3.test.ts

@@ -0,0 +1,4 @@
+import { getExamplesBatch } from './getExamples'
+import { testExample } from './testExample'
+
+getExamplesBatch(3).forEach(testExample)

test/e2e/examples/batch4.test.ts

@@ -0,0 +1,4 @@
+import { getExamplesBatch } from './getExamples'
+import { testExample } from './testExample'
+
+getExamplesBatch(4).forEach(testExample)

test/e2e/examples/getExamples.ts

@@ -0,0 +1,82 @@
+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',
+  // TODO: remove slice()
+  // We can't add all of them at once because the CI will timeout (because it will add all examples into one action)
+].slice(0, 20)
+
+const batches = 5
+const batchSize = Math.floor((testedExamples.length + batches - 1) / batches)
+/**
+ * We need to split examples into multiple files because otherwise our --timings magic won't be able to splid our tests into mulpitle actions
+ */
+export const getExamplesBatch = (n: number) =>
+  testedExamples.slice(
+    n * batchSize,
+    Math.min(testedExamples.length, (n + 1) * batchSize)
+  )

test/e2e/examples/testExample.ts

@@ -0,0 +1,44 @@
+import { createNextDescribe } from 'e2e-utils'
+import path from 'path'
+import fs from 'fs-extra'
+
+export const testExample = (example) => {
+  const exampleFiles = path.join(
+    __dirname,
+    '..',
+    '..',
+    '..',
+    'examples',
+    example
+  )
+
+  const packageJson = fs.readJsonSync(path.join(exampleFiles, 'package.json'))
+  describe(`example '${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}'`)
+    })
+    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', () => {})
+      }
+    )
+  })
+}