test(e2e): Show test progress & ensure we clean before running tests (#8649)

Noticed that when running `yarn test:run` it sometimes hang forever.
Solved this with two steps:

1. Make sure we actually output the shell stuff, as otherwise it is
super hard to debug what's going on.
2. The problem was that sometimes `pnpm` prompts to re-create
node_modules (??), and the prompt was obviously forever hanging. I
couldn't find any option to disable this from pnpm side, sadly 😬 So I
ended up adding a step to clean out all node_modules etc. before running
the tests.

Author: mydea

packages/e2e-tests/package.json

@@ -20,7 +20,8 @@
     "test:validate-test-app-setups": "ts-node validate-test-app-setups.ts",
     "test:prepare": "ts-node prepare.ts",
     "test:validate": "run-s test:validate-configuration test:validate-test-app-setups",
-    "clean": "rimraf tmp test-applications/**/{node_modules,dist,build,.next,.sveltekit,pnpm-lock.yaml}"
+    "clean": "rimraf tmp node_modules && yarn clean:test-applications",
+    "clean:test-applications": "rimraf test-applications/**/{node_modules,dist,build,.next,.sveltekit,pnpm-lock.yaml}"
   },
   "devDependencies": {
     "@types/glob": "8.0.0",

packages/e2e-tests/run.ts

@@ -1,15 +1,37 @@
 /* eslint-disable max-lines */
 /* eslint-disable no-console */
-import { exec } from 'child_process';
+import { spawn } from 'child_process';
 import * as dotenv from 'dotenv';
 import { sync as globSync } from 'glob';
 import { resolve } from 'path';
-import { promisify } from 'util';
 
 import { validate } from './lib/validate';
 import { registrySetup } from './registrySetup';
 
-const asyncExec = promisify(exec);
+function asyncExec(command: string, options: { env: Record<string, string | undefined>; cwd: string }): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const process = spawn(command, { ...options, shell: true });
+
+    process.stdout.on('data', data => {
+      console.log(`${data}`);
+    });
+
+    process.stderr.on('data', data => {
+      console.error(`${data}`);
+    });
+
+    process.on('error', error => {
+      reject(error);
+    });
+
+    process.on('close', code => {
+      if (code !== 0) {
+        return reject();
+      }
+      resolve();
+    });
+  });
+}
 
 async function run(): Promise<void> {
   // Load environment variables from .env file locally
@@ -31,8 +53,13 @@ async function run(): Promise<void> {
   const env = { ...process.env, ...envVarsToInject };
 
   try {
+    console.log('Cleaning test-applications...');
+    console.log('');
+
     registrySetup();
 
+    await asyncExec('pnpm clean:test-applications', { env, cwd: __dirname });
+
     const testAppPaths = appName ? [appName.trim()] : globSync('*', { cwd: `${__dirname}/test-applications/` });
 
     console.log(`Runnings tests for: ${testAppPaths.join(', ')}`);

packages/e2e-tests/test-applications/create-next-app/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "build": "next build",
+    "clean": "npx rimraf node_modules,pnpm-lock.yaml",
     "test:prod": "TEST_ENV=prod playwright test",
     "test:dev": "TEST_ENV=dev playwright test",
     "test:build": "pnpm install && npx playwright install && pnpm build",

packages/e2e-tests/test-applications/create-react-app/package.json

@@ -23,6 +23,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
+    "clean": "npx rimraf node_modules,pnpm-lock.yaml",
     "test:build": "pnpm install && pnpm build",
     "test:build-ts3.8": "pnpm install && pnpm add [email protected] && pnpm build",
     "test:build-canary": "pnpm install && pnpm add react@canary react-dom@canary && pnpm build",

packages/e2e-tests/test-applications/create-remix-app/package.json

@@ -6,6 +6,7 @@
     "dev": "remix dev",
     "start": "remix-serve build",
     "typecheck": "tsc",
+    "clean": "npx rimraf node_modules,pnpm-lock.yaml",
     "test:build": "pnpm install && npx playwright install && pnpm build",
     "test:assert": "pnpm playwright test"
   },

packages/e2e-tests/test-applications/nextjs-app-dir/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "build": "next build > .tmp_build_output",
+    "clean": "npx rimraf node_modules,pnpm-lock.yaml",
     "test:prod": "TEST_ENV=production playwright test",
     "test:dev": "TEST_ENV=development playwright test",
     "test:build": "pnpm install && npx playwright install && pnpm build",

packages/e2e-tests/test-applications/node-express-app/package.json

@@ -6,6 +6,7 @@
     "build": "tsc",
     "start": "node dist/app.js",
     "test": "playwright test",
+    "clean": "npx rimraf node_modules,pnpm-lock.yaml",
     "test:build": "pnpm install && pnpm build",
     "test:assert": "pnpm test"
   },

packages/e2e-tests/test-applications/react-create-hash-router/package.json

@@ -22,6 +22,7 @@
     "build": "react-scripts build",
     "start": "serve -s build",
     "test": "playwright test",
+    "clean": "npx rimraf node_modules,pnpm-lock.yaml",
     "test:build": "pnpm install && npx playwright install && pnpm build",
     "test:build-canary": "pnpm install && pnpm add react@canary react-dom@canary && npx playwright install && pnpm build",
     "test:assert": "pnpm test"

packages/e2e-tests/test-applications/standard-frontend-react-tracing-import/package.json

@@ -23,6 +23,7 @@
     "build": "react-scripts build",
     "start": "serve -s build",
     "test": "playwright test",
+    "clean": "npx rimraf node_modules,pnpm-lock.yaml",
     "test:build": "pnpm install && npx playwright install && pnpm build",
     "test:assert": "pnpm test"
   },

packages/e2e-tests/test-applications/standard-frontend-react/package.json

@@ -22,6 +22,7 @@
     "build": "react-scripts build",
     "start": "serve -s build",
     "test": "playwright test",
+    "clean": "npx rimraf node_modules,pnpm-lock.yaml",
     "test:build": "pnpm install && npx playwright install && pnpm build",
     "test:build-ts3.8": "pnpm install && pnpm add [email protected] && npx playwright install && pnpm build",
     "test:build-canary": "pnpm install && pnpm add react@canary react-dom@canary && npx playwright install && pnpm build",

packages/e2e-tests/test-applications/sveltekit/package.json

@@ -6,6 +6,7 @@
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
+    "clean": "npx rimraf node_modules,pnpm-lock.yaml",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test:prod": "TEST_ENV=production playwright test",