Merge e2e test node_modules (#40926)

Merge e2e tests customized `node_modules` with installed `node_modules`,
to let you debug easily locally without moving folder between
`node_modules` and `node_modules_bak`

Also add `optoutServerComponentsBundle` to config schema.

packages/next/server/config-schema.ts

@@ -240,6 +240,12 @@ const configSchema = {
         appDir: {
           type: 'boolean',
         },
+        optoutServerComponentsBundle: {
+          items: {
+            type: 'string',
+          },
+          type: 'array',
+        },
         browsersListForSwc: {
           type: 'boolean',
         },

run-tests.js

@@ -223,8 +223,10 @@ async function main() {
     console.log('Creating Next.js install for isolated tests')
     const reactVersion = process.env.NEXT_TEST_REACT_VERSION || 'latest'
     const testStarter = await createNextInstall({
-      react: reactVersion,
-      'react-dom': reactVersion,
+      dependencies: {
+        react: reactVersion,
+        'react-dom': reactVersion,
+      },
     })
     process.env.NEXT_TEST_STARTER = testStarter
   }

test/e2e/app-dir/rsc-basic.test.ts

@@ -38,15 +38,14 @@ describe('app dir - react server components', () => {
     next = await createNext({
       files: new FileRef(path.join(__dirname, './rsc-basic')),
       dependencies: {
-        'styled-components': '6.0.0-alpha.5',
+        'styled-components': '6.0.0-beta.2',
         react: 'experimental',
         'react-dom': 'experimental',
       },
       packageJson: {
         scripts: {
-          setup: `cp -r ./node_modules_bak/* ./node_modules`,
-          build: 'yarn setup && next build',
-          dev: 'yarn setup && next dev',
+          build: 'next build',
+          dev: 'next dev',
           start: 'next start',
         },
       },

test/e2e/styled-jsx/index.test.ts

@@ -13,23 +13,25 @@ function runTest() {
     beforeAll(async () => {
       next = await createNext({
         files: {
-          node_modules_bak: new FileRef(path.join(appDir, 'node_modules_bak')),
+          node_modules: new FileRef(path.join(appDir, 'node_modules')),
           pages: new FileRef(path.join(appDir, 'pages')),
           '.npmrc': new FileRef(path.join(appDir, '.npmrc')),
         },
         packageJson: {
           scripts: {
-            setup: `cp -r ./node_modules_bak/my-comps ./node_modules;`,
-            build: `yarn setup && next build`,
-            dev: `yarn setup && next dev`,
+            build: 'next build',
+            dev: 'next dev',
             start: 'next start',
           },
         },
         dependencies: {
-          'styled-jsx': '5.0.0', // styled-jsx on user side
+          // A different version of styled-jsx on user side,
+          // using a different patch version comparing to the one from next.js
+          'styled-jsx': '5.0.0',
         },
         startCommand: 'yarn ' + ((global as any).isNextDev ? 'dev' : 'start'),
-        buildCommand: `yarn build`,
+        buildCommand: 'yarn build',
+        installCommand: 'yarn',
       })
     })
     afterAll(() => next.destroy())

test/lib/create-next-install.js

@@ -7,12 +7,12 @@ const { randomBytes } = require('crypto')
 const { linkPackages } =
   require('../../.github/actions/next-stats-action/src/prepare/repo-setup')()
 
-async function createNextInstall(
+async function createNextInstall({
   dependencies,
   installCommand,
   packageJson = {},
-  packageLockPath = ''
-) {
+  packageLockPath = '',
+}) {
   const tmpDir = await fs.realpath(process.env.NEXT_TEST_DIR || os.tmpdir())
   const origRepoDir = path.join(__dirname, '../../')
   const installDir = path.join(

test/lib/next-modes/base.ts

@@ -143,16 +143,30 @@ export class NextInstance {
       ) {
         await fs.copy(process.env.NEXT_TEST_STARTER, this.testDir)
       } else if (!skipIsolatedNext) {
-        this.testDir = await createNextInstall(
-          finalDependencies,
-          this.installCommand,
-          this.packageJson,
-          this.packageLockPath
-        )
+        this.testDir = await createNextInstall({
+          dependencies: finalDependencies,
+          installCommand: this.installCommand,
+          packageJson: this.packageJson,
+          packageLockPath: this.packageLockPath,
+        })
       }
       require('console').log('created next.js install, writing test files')
     }
 
+    const tempNodeModulesFolder = 'node_modules_bak'
+    // Merge customized node_modules and installed node_modules.
+    // Move files[node_modules] to a temporary folder node_modules_back,
+    // then copy the modules back to node_modules after installation.
+    const tempNodeModulesPath = path.join(this.testDir, tempNodeModulesFolder)
+    const nodeModulesDir = path.join(this.testDir, 'node_modules')
+    const hasNodeModulesDir =
+      fs.existsSync(nodeModulesDir) &&
+      (await fs.stat(nodeModulesDir)).isDirectory()
+    if (hasNodeModulesDir) {
+      // Move node_modules to temp folder
+      await fs.move(nodeModulesDir, tempNodeModulesPath)
+    }
+
     if (this.files instanceof FileRef) {
       // if a FileRef is passed directly to `files` we copy the
       // entire folder to the test directory
@@ -163,6 +177,7 @@ export class NextInstance {
           `FileRef passed to "files" in "createNext" is not a directory ${this.files.fsPath}`
         )
       }
+
       await fs.copy(this.files.fsPath, this.testDir)
     } else {
       for (const filename of Object.keys(this.files)) {
@@ -178,6 +193,12 @@ export class NextInstance {
       }
     }
 
+    if (hasNodeModulesDir) {
+      // Move node_modules from temp back to origin
+      await fs.copy(tempNodeModulesPath, nodeModulesDir)
+      await fs.remove(tempNodeModulesPath)
+    }
+
     let nextConfigFile = Object.keys(this.files).find((file) =>
       file.startsWith('next.config.')
     )