feat: upgrade React 16 to 18 and migrate Enzyme tests to RTL

Upgrade react/react-dom to ^18.3.1, react-mosaic-component to ^6.1.1,
and @testing-library/react to ^16.1.0. Migrate ReactDOM.render() to
createRoot(), add Blueprint v3 type augmentations for React 18
compatibility, remove Enzyme and migrate all 21 Enzyme test files to
React Testing Library. Fix React 18 behavioral changes in controlled
inputs and MobX observer re-rendering.

Co-Authored-By: Claude Opus 4.6 <[email protected]>

Author: felixrieseberg

package.json

@@ -67,9 +67,9 @@
     "package-json": "^7.0.0",
     "parse-env-string": "^1.0.1",
     "prettier": "^3.6.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-mosaic-component": "^4.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-mosaic-component": "^6.1.1",
     "react-window": "^1.8.10",
     "semver": "^7.3.4",
     "shell-env": "^3.0.1",
@@ -94,18 +94,16 @@
     "@reforged/maker-appimage": "^5.1.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@tsconfig/node22": "^22.0.2",
     "@types/classnames": "^2.2.11",
-    "@types/enzyme": "^3.10.8",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/fs-extra": "^9.0.7",
     "@types/getos": "^3.0.1",
     "@types/node": "^22.19.1",
     "@types/parse-env-string": "^1.0.2",
-    "@types/react": "^16.14.0",
-    "@types/react-dom": "^16.9.11",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "@types/react-window": "^1.8.8",
     "@types/semver": "^7.3.4",
     "@types/tmp": "0.2.0",
@@ -116,9 +114,6 @@
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
     "electron": "^40.1.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.7",
-    "enzyme-to-json": "^3.6.1",
     "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "^3.5.5",
@@ -167,7 +162,8 @@
   },
   "resolutions": {
     "@electron-forge/maker-base": "8.0.0-alpha.3",
-    "@electron-forge/shared-types": "8.0.0-alpha.3"
+    "@electron-forge/shared-types": "8.0.0-alpha.3",
+    "@types/react": "^18.3.0"
   },
   "packageManager": "[email protected]+sha512.c38cafb5c7bb273f3926d04e55e1d8c9dfa7d9c3ea1f36a4868fa028b9e5f72298f0b7f401ad5eb921749eb012eb1c3bb74bf7503df3ee43fd600d14a018266f",
   "dependenciesMeta": {

rtl-spec/components/commands-address-bar.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { runInAction } from 'mobx';
 import { beforeEach, describe, expect, it } from 'vitest';
@@ -76,7 +76,9 @@ describe('AddressBar component', () => {
     runInAction(() => {
       store.activeGistAction = action;
     });
-    const btn = getByRole('button');
-    expect(btn).toBeDisabled();
+    await waitFor(() => {
+      const btn = getByRole('button');
+      expect(btn).toBeDisabled();
+    });
   });
 });

rtl-spec/components/commands-publish-button.spec.tsx

@@ -1,4 +1,5 @@
 import { Octokit } from '@octokit/rest';
+import { act, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import {
@@ -273,7 +274,7 @@ describe('Action button component', () => {
       // create a button that's primed to update gistId
       state.gistId = gistId;
       ({ instance } = createActionButton());
-      instance.setState({ actionType: GistActionType.update });
+      act(() => instance.setState({ actionType: GistActionType.update }));
 
       mocktokit.gists.get.mockImplementation(() => {
         return {
@@ -316,7 +317,7 @@ describe('Action button component', () => {
 
       // create a button primed to delete gistId
       ({ instance } = createActionButton());
-      instance.setState({ actionType: GistActionType.delete });
+      act(() => instance.setState({ actionType: GistActionType.delete }));
     });
 
     it('attempts to delete an existing Gist', async () => {
@@ -349,11 +350,19 @@ describe('Action button component', () => {
       } = createActionButton();
       expect(container.querySelector('fieldset')).not.toBeDisabled();
 
-      state.activeGistAction = gistActionState;
-      expect(container.querySelector('fieldset')).toBeDisabled();
+      act(() => {
+        state.activeGistAction = gistActionState;
+      });
+      await waitFor(() => {
+        expect(container.querySelector('fieldset')).toBeDisabled();
+      });
 
-      state.activeGistAction = GistActionState.none;
-      expect(container.querySelector('fieldset')).not.toBeDisabled();
+      act(() => {
+        state.activeGistAction = GistActionState.none;
+      });
+      await waitFor(() => {
+        expect(container.querySelector('fieldset')).not.toBeDisabled();
+      });
     }
 
     it('while publishing', async () => {

rtl-spec/components/editors-toolbar-button.spec.tsx

@@ -46,6 +46,7 @@ describe('Editor toolbar button component', () => {
         getRoot: vi.fn(),
       },
       mosaicId: 'test',
+      blueprintNamespace: 'bp3',
     };
 
     ({ state: store } = window.app);

src/blueprint-react18.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Type augmentations for Blueprint.js v3 components to work with React 18.
+ *
+ * React 18 removed implicit `children` from React.Component props.
+ * Blueprint v3 class components don't declare `children` in their prop types,
+ * so they fail type-checking with \@types/react 18.
+ *
+ * This file adds `children` to the affected Blueprint component props.
+ * It can be removed when Blueprint is replaced with shadcn/ui.
+ */
+
+import { ReactNode } from 'react';
+
+declare module '@blueprintjs/core' {
+  interface IAlertProps {
+    children?: ReactNode;
+  }
+  interface IDialogProps {
+    children?: ReactNode;
+  }
+  interface IFormGroupProps {
+    children?: ReactNode;
+  }
+  interface IRadioGroupProps {
+    children?: ReactNode;
+  }
+}
+
+declare module '@blueprintjs/select' {
+  interface ISelectProps<T> {
+    children?: ReactNode;
+  }
+}
+
+declare module '@blueprintjs/popover2' {
+  interface IPopover2Props<T> {
+    children?: ReactNode;
+  }
+  interface ITooltip2Props<T> {
+    children?: ReactNode;
+  }
+}

src/renderer/app.tsx

@@ -113,7 +113,7 @@ export class App {
    * Initial setup call, loading Monaco and kicking off the React
    * render process.
    */
-  public async setup(): Promise<void | Element | React.Component> {
+  public async setup(): Promise<void> {
     if (this.state.isUsingSystemTheme) {
       await this.loadTheme(getCurrentTheme().file);
     } else {
@@ -122,13 +122,13 @@ export class App {
 
     const [
       { default: React },
-      { render },
+      { createRoot },
       { Dialogs },
       { OutputEditorsWrapper },
       { Header },
     ] = await Promise.all([
       import('react'),
-      import('react-dom'),
+      import('react-dom/client'),
       import('./components/dialogs.js'),
       import('./components/output-editors-wrapper.js'),
       import('./components/header.js'),
@@ -146,7 +146,8 @@ export class App {
       </div>
     );
 
-    const rendered = render(app, document.getElementById('app'));
+    const root = createRoot(document.getElementById('app')!);
+    root.render(app);
 
     this.setupResizeListener();
     this.setupOfflineListener();
@@ -160,8 +161,6 @@ export class App {
     window.ElectronFiddle.addEventListener('set-show-me-template', () => {
       window.ElectronFiddle.setShowMeTemplate(this.state.templateName);
     });
-
-    return rendered;
   }
 
   private setupTypeListeners() {

src/renderer/components/output.tsx

@@ -133,7 +133,7 @@ export const Output = observer(
 
       const { isConsoleShowing } = this.props.appState;
 
-      if (this.context.mosaicActions) {
+      if (this.context?.mosaicActions) {
         const mosaicTree = this.context.mosaicActions.getRoot();
         if (isParentNode(mosaicTree)) {
           // splitPercentage defines the percentage of space the first panel takes

src/renderer/components/settings-electron.tsx

@@ -204,13 +204,14 @@ export const ElectronSettings = observer(
      * Handles a change in which channels should be displayed.
      */
     public handleChannelChange(event: React.FormEvent<HTMLInputElement>) {
-      const { id, checked } = event.currentTarget;
+      const { id } = event.currentTarget;
       const { appState } = this.props;
+      const channel = id as ElectronReleaseChannel;
 
-      if (!checked) {
-        appState.hideChannels([id as ElectronReleaseChannel]);
+      if (appState.channelsToShow.includes(channel)) {
+        appState.hideChannels([channel]);
       } else {
-        appState.showChannels([id as ElectronReleaseChannel]);
+        appState.showChannels([channel]);
       }
     }
 

tests/renderer/app-spec.tsx

@@ -1,3 +1,4 @@
+import { act } from '@testing-library/react';
 import * as semver from 'semver';
 import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -59,10 +60,15 @@ describe('App component', () => {
     it('renders the app', async () => {
       vi.useFakeTimers();
 
-      const result = (await app.setup()) as HTMLDivElement;
-      vi.runAllTimers();
+      await act(async () => {
+        await app.setup();
+        await vi.advanceTimersByTimeAsync(100);
+      });
 
-      expect(result.innerHTML).toBe('Header;OutputEditorsWrapper;Dialogs;');
+      const appEl = document.getElementById('app')!;
+      expect(appEl.innerHTML).toContain('Header;');
+      expect(appEl.innerHTML).toContain('OutputEditorsWrapper;');
+      expect(appEl.innerHTML).toContain('Dialogs;');
 
       vi.useRealTimers();
     });