test: Run integration tests for Next 10/11 and Webpack 4/5 matrix (#3741)

test: Run integration tests for Next 10/11 and Webpack 4/5 matrix

Author: kamilogorek

packages/nextjs/package.json

@@ -55,11 +55,7 @@
     "test": "run-s test:unit test:integration",
     "test:watch": "jest --watch",
     "test:unit": "jest",
-    "test:integration": "run-s test:integration:clean test:integration:build test:integration:server test:integration:client",
-    "test:integration:clean": "cd test/integration && rimraf node_modules .next .env.local",
-    "test:integration:build": "cd test/integration && yarn --no-lockfile && yarn build",
-    "test:integration:server": "cd test/integration && node test/server.js --silent",
-    "test:integration:client": "cd test/integration && node test/client.js --silent",
+    "test:integration": "test/run-integration-tests.sh",
     "pack": "npm pack",
     "vercel:branch": "source vercel/set-up-branch-for-test-app-use.sh",
     "vercel:project": "source vercel/make-project-use-current-branch.sh",

packages/nextjs/test/integration/components/Layout.tsx

@@ -27,13 +27,16 @@ const Layout = ({ children, title = 'This is the default title' }: Props) => (
         <Link href="/users">
           <a>Users List</a>
         </Link>{' '}
-        | <a href="/api/users">Users API</a>
+        |{' '}
+        <Link href="/api/users">
+          <a>Users API</a>
+        </Link>
       </nav>
     </header>
     {children}
     <footer>
       <hr />
-      <span>I'm here to stay (Footer)</span>
+      <span>Im here to stay (Footer)</span>
     </footer>
   </div>
 );

packages/nextjs/test/integration/next-env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />

packages/nextjs/test/integration/next.config.js

@@ -1,6 +1,10 @@
 const { withSentryConfig } = require('@sentry/nextjs');
 
-const moduleExports = {};
+const moduleExports = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  }
+};
 const SentryWebpackPluginOptions = {
   dryRun: true,
   silent: true,

packages/nextjs/test/integration/next10.config.template

@@ -0,0 +1,15 @@
+const { withSentryConfig } = require('@sentry/nextjs');
+
+// NOTE: This will be used by integration tests to distinguish between Webpack 4 and Webpack 5
+const moduleExports = {
+  future: {
+    webpack5: %RUN_WEBPACK_5%,
+  },
+};
+
+const SentryWebpackPluginOptions = {
+  dryRun: true,
+  silent: true,
+};
+
+module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);

packages/nextjs/test/integration/next11.config.template

@@ -0,0 +1,16 @@
+const { withSentryConfig } = require('@sentry/nextjs');
+
+// NOTE: This will be used by integration tests to distinguish between Webpack 4 and Webpack 5
+const moduleExports = {
+  webpack5: %RUN_WEBPACK_5%,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+};
+
+const SentryWebpackPluginOptions = {
+  dryRun: true,
+  silent: true,
+};
+
+module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);

packages/nextjs/test/integration/package.json

@@ -1,13 +1,13 @@
 {
   "name": "with-typescript",
+  "license": "BSD-3-Clause",
   "scripts": {
     "dev": "next",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
     "@sentry/nextjs": "file:../../",
-    "next": "10.x",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },

packages/nextjs/test/run-integration-tests.sh

@@ -0,0 +1,76 @@
+#!/usr/bin/env bash
+
+set -e
+
+function cleanup {
+  echo "[nextjs] Cleaning up..."
+  mv next.config.js.bak next.config.js 2> /dev/null || true
+  yarn remove next > /dev/null 2>&1 || true
+  echo "[nextjs] Test run complete"
+}
+
+trap cleanup EXIT
+
+cd "$(dirname "$0")/integration"
+
+for NEXTJS_VERSION in 10 11; do
+  NODE_VERSION=$(node -v)
+  NODE_MAJOR=$(echo "$NODE_VERSION" | cut -c2- | cut -d. -f1)
+
+  # Next 10 requires at least Node v10
+  if [ "$NODE_MAJOR" -lt "10" ]; then
+    echo "[nextjs] Next.js is not compatible with versions of Node older than v10. Current version $NODE_VERSION"
+    exit 0
+  fi
+
+  # Next.js v11 requires at least Node v12
+  if [ "$NODE_MAJOR" -lt "12" ] && [ "$NEXTJS_VERSION" -eq "10" ]; then
+    echo "[nextjs$NEXTJS_VERSION] Not compatible with Node $NODE_VERSION"
+    exit 0
+  fi
+
+  echo "[nextjs@$NEXTJS_VERSION] Running integration tests on $NODE_VERSION"
+
+  echo "[nextjs@$NEXTJS_VERSION] Preparing environment..."
+  mv next.config.js next.config.js.bak
+  rm -rf node_modules .next .env.local 2> /dev/null || true
+
+  echo "[nextjs@$NEXTJS_VERSION] Installing dependencies..."
+  yarn --no-lockfile --silent > /dev/null 2>&1
+  yarn add "next@$NEXTJS_VERSION" > /dev/null 2>&1
+
+  for RUN_WEBPACK_5 in false true; do
+    [ "$RUN_WEBPACK_5" == true ] &&
+      WEBPACK_VERSION=5 ||
+      WEBPACK_VERSION=4
+
+    if [ "$NEXTJS_VERSION" -eq "10" ]; then
+      sed "s/%RUN_WEBPACK_5%/$RUN_WEBPACK_5/g" < next10.config.template > next.config.js
+    else
+      sed "s/%RUN_WEBPACK_5%/$RUN_WEBPACK_5/g" < next11.config.template > next.config.js
+    fi
+
+    echo "[nextjs@$NEXTJS_VERSION | webpack@$WEBPACK_VERSION] Building..."
+    yarn build | grep "Using webpack"
+
+    EXIT_CODE=0
+    node test/server.js --silent || EXIT_CODE=$?
+    if [ $EXIT_CODE -eq 0 ]
+    then
+      echo "[nextjs@$NEXTJS_VERSION | webpack@$WEBPACK_VERSION] Server integration tests passed"
+    else
+      echo "[nextjs@$NEXTJS_VERSION | webpack@$WEBPACK_VERSION] Server integration tests failed"
+      exit 1
+    fi
+
+    EXIT_CODE=0
+    node test/client.js --silent || EXIT_CODE=$?
+    if [ $EXIT_CODE -eq 0 ]
+    then
+      echo "[nextjs@$NEXTJS_VERSION | webpack@$WEBPACK_VERSION] Client integration tests passed"
+    else
+      echo "[nextjs@$NEXTJS_VERSION | webpack@$WEBPACK_VERSION] Client integration tests failed"
+      exit 1
+    fi
+  done
+done;