add nextjs-10 e2e-test (#16700)

* add nextjs-10 e2e test * apply debug mode patch * fix file permission * update fixture setup * fix registry setup * run nextjs10 e2e test only * copy contents * Revert "run nextjs10 e2e test only" This reverts commit 23d61047e902817cd99459c2374e5a15a1d66940. * ensure side effects * Add transform-runtime for regenerator * Fix test --------- Co-authored-by: Nicolò Ribaudo <[email protected]>
2026-09-24 16:56:45 +00:00 · 2024-07-31 13:41:15 +02:00
parent aa4850a5ca
commit 236e917ffa
6 changed files with 177 additions and 0 deletions
@@ -54,6 +54,7 @@ jobs:
          - react-native
          - prettier
          - angular-cli
+          - nextjs-10
    steps:
      - name: Get yarn1 cache directory path
        id: yarn1-cache-dir-path
@@ -61,6 +61,7 @@ export default [
      "eslint/*/lib",
      "eslint/*/node_modules",
      "eslint/*/test/fixtures",
+      "scripts/integration-tests/fixtures",
      "test/runtime-integration/*/output.js",
      "test/runtime-integration/*/output-absolute.js",
      "Makefile.js",
@@ -0,0 +1,41 @@
+#!/usr/bin/env bash
+
+#==============================================================================#
+#                                  SETUP                                       #
+#==============================================================================#
+
+# Start in scripts/integration-tests/ even if run from root directory
+cd "$(dirname "$0")" || exit
+root="$PWD"
+
+source utils/local-registry.sh
+source utils/cleanup.sh
+
+# Echo every command being executed
+set -x
+
+# Create example app
+npx create-next-app@^10 --example with-custom-babel-config /tmp/nextjs-10
+cp -r fixtures/nextjs-10/. /tmp/nextjs-10
+cd /tmp/nextjs-10
+
+#==============================================================================#
+#                                   TEST                                       #
+#==============================================================================#
+
+startLocalRegistry "$root"/verdaccio-config.yml
+
+npm install --ignore-scripts
+
+# Let Next.js print full build errors
+sed -i "s/result=nextBuildSpan.traceChild('format-webpack-messages')/if(result.errors.length>0){console.error(result.errors[0].message)};result=nextBuildSpan.traceChild('format-webpack-messages')/g" ./node_modules/next/dist/build/index.js
+
+# Test
+
+# Next.js 10 uses webpack 4.44, which is affected by https://github.com/webpack/webpack/issues/14532
+export NODE_OPTIONS=--openssl-legacy-provider
+npm run build
+
+export -n NODE_OPTIONS
+
+cleanup
@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      { "forceAllTransforms": true }
+    ],
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-do-expressions",
+    "@babel/plugin-transform-runtime"
+  ]
+}
@@ -0,0 +1,20 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^10",
+    "react": "^17",
+    "react-dom": "^17"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-do-expressions": "latest",
+    "@babel/plugin-transform-runtime": "latest",
+    "@babel/preset-env": "latest",
+    "@babel/preset-react": "latest",
+    "@babel/runtime": "latest"
+  }
+}
@@ -0,0 +1,101 @@
+import { useState, useEffect } from "react";
+
+const MyLuckNo = () => {
+  const results = [], [randomNumber, setRandomNumber] = useState(null);
+
+  // Next.js 10 uses Babel 7.12, which supports up to ES2022
+  // log results to create side effects
+
+  // RegExp modifiers
+  // results.push(/[A-Z](?-i[a-z])/i.test("Aa"));
+  
+  // ES2025
+  // results.push(/(?<year>[0-9]{4})-[0-9]{2}|[0-9]{2}-(?<year>[0-9]{4})/.test("2000"));
+
+  // ES2024
+  // results.push(/[[0-7]&&[5-9]]\u{10FFFF}/v.test("0"));
+
+  // ES2022
+  results.push(class C {
+    static property;
+    static #property;
+    #method() {}
+    property = #property in C;
+  });
+
+  // ES2021
+  results.push(results ??= [0xEB_2021]);
+
+  // ES2020
+  results.push(results?.[0] ?? [2020n]);
+
+  // ES2019
+  try {
+    results.push({});
+    throw new Error();
+  } catch {}
+
+  // ES2018
+  results.push(async function *iter({ ...state }) { yield* iter({ ...state }) });
+  results.push(/\p{ASCII}(?<second>.)/us.exec("you"));
+
+  // ES2017
+  results.push(async function foo() { await foo() });
+
+  // ES2016
+  results.push(201 ** 6);
+
+  // ES2015
+  results.push(() => { 
+    let a = class {
+      [foo](x = new.target, [...y]) {
+        for ({x} of y) {
+          const \u{1d49c} = /foo(.)bar/uy.exec(`foo💩bar`) instanceof a;
+          results.push(\u{1d49c});
+        }
+      }; 
+    }
+  });
+
+  // ES5
+  results.push({ get bar() { return }, set bar(v) {} })
+
+  // ES3
+  var abstract = 1;
+  results.push(({ const: abstract }).const = true);
+
+  const recalculate = () => {
+    setRandomNumber(Math.ceil(Math.random() * 100));
+  };
+
+  useEffect(() => {
+    recalculate();
+    console.log(results);
+  }, []);
+
+  // do expressions
+  const message = do {
+    if (randomNumber < 30) {
+      // eslint-disable-next-line no-unused-expressions
+      ("Do not give up. Try again.");
+    } else if (randomNumber < 60) {
+      // eslint-disable-next-line no-unused-expressions
+      ("You are a lucky guy");
+    } else {
+      // eslint-disable-next-line no-unused-expressions
+      ("You are soooo lucky!");
+    }
+  };
+
+  // JSX
+  if (randomNumber === null) return <p>Please wait..</p>;
+  return (
+    <div>
+      <h3>Your Lucky number is: "{randomNumber}"</h3>
+      <p>{message}</p>
+      <button onClick={() => recalculate()}>Try Again</button>
+    </div>
+  );
+};
+
+export default MyLuckNo;