From 7ca20761e9329128f93b4e4986b2bcdcd8abd56d Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 8 Feb 2024 18:37:07 +0100
Subject: [PATCH] e2e-test: add test for backwards compatibility with React 17

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 packages/e2e-test/src/commands/run.ts | 43 +++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/packages/e2e-test/src/commands/run.ts b/packages/e2e-test/src/commands/run.ts
index cadd7b878d..9a9bf556ee 100644
--- a/packages/e2e-test/src/commands/run.ts
+++ b/packages/e2e-test/src/commands/run.ts
@@ -71,6 +71,20 @@ export async function run() {
     env: { ...process.env, CI: undefined },
   });
 
+  await switchToReact17(appDir);
+
+  print(`Running 'yarn install' to install React 17`);
+  await runPlain(['yarn', 'install'], { cwd: appDir });
+
+  print(`Running 'yarn tsc' with React 17`);
+  await runPlain(['yarn', 'tsc'], { cwd: appDir });
+
+  print(`Running 'yarn test:e2e' with React 17`);
+  await runPlain(['yarn', 'test:e2e'], {
+    cwd: appDir,
+    env: { ...process.env, CI: undefined },
+  });
+
   if (
     Boolean(process.env.POSTGRES_USER) ||
     Boolean(process.env.MYSQL_CONNECTION)
@@ -393,6 +407,35 @@ async function createPlugin(options: {
   }
 }
 
+/**
+ * Switch the entire project to use React 17
+ */
+async function switchToReact17(appDir: string) {
+  const rootPkg = await fs.readJson(resolvePath(appDir, 'package.json'));
+  rootPkg.resolutions = {
+    ...(rootPkg.resolutions || {}),
+    react: '^17.0.0',
+    'react-dom': '^17.0.0',
+    '@types/react': '^17.0.0',
+    '@types/react-dom': '^17.0.0',
+  };
+  await fs.writeJson(resolvePath(appDir, 'package.json'), rootPkg, {
+    spaces: 2,
+  });
+
+  await fs.writeFile(
+    resolvePath(appDir, 'packages/app/src/index.tsx'),
+    `import '@backstage/cli/asset-types';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+`,
+    'utf8',
+  );
+}
+
 /** Drops PG databases */
 async function dropDB(database: string, client: string) {
   try {