feat(kernel-ui,extension): downgrade React for MetaMask extension compatibility

packages/extension/package.json

@@ -52,7 +52,8 @@
     "@metamask/ocap-kernel": "workspace:^",
     "@metamask/streams": "workspace:^",
     "@metamask/utils": "^11.4.0",
-    "react-dom": "^18.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "ses": "^1.13.0"
   },
   "devDependencies": {
@@ -67,8 +68,8 @@
     "@playwright/test": "^1.51.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@types/chrome": "^0.0.313",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.11",
     "@typescript-eslint/eslint-plugin": "^8.29.0",
     "@typescript-eslint/parser": "^8.29.0",
     "@typescript-eslint/utils": "^8.29.0",

packages/extension/src/popup.test.tsx

@@ -1,11 +1,9 @@
 import { App } from '@metamask/kernel-ui';
-import { createRoot } from 'react-dom/client';
+import { render } from 'react-dom';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
-vi.mock('react-dom/client', () => ({
-  createRoot: vi.fn(() => ({
-    render: vi.fn(),
-  })),
+vi.mock('react-dom', () => ({
+  render: vi.fn(),
 }));
 
 vi.mock('@metamask/kernel-ui', () => ({
@@ -22,10 +20,10 @@ describe('popup', () => {
     root.id = 'root';
     document.body.appendChild(root);
     await import('./popup.tsx');
-    expect(createRoot).toHaveBeenCalledWith(root);
-    const mockRoot = vi.mocked(createRoot).mock.results[0]?.value;
-    expect(mockRoot.render).toHaveBeenCalledWith(expect.any(Object));
-    const renderCall = mockRoot.render.mock.calls[0][0];
-    expect(renderCall.type).toBe(App);
+    expect(render).toHaveBeenCalledWith(expect.any(Object), root);
+    const renderArgs = vi.mocked(render).mock.calls[0];
+    expect(renderArgs).toBeDefined();
+    expect(renderArgs?.[0]).toBeDefined();
+    expect((renderArgs?.[0] as unknown as React.ReactElement)?.type).toBe(App);
   });
 });

packages/extension/src/popup.tsx

@@ -1,7 +1,6 @@
 import '@metamask/kernel-ui/styles.css';
 import { App } from '@metamask/kernel-ui';
-import { createRoot } from 'react-dom/client';
+import { createElement } from 'react';
+import { render } from 'react-dom';
 
-// @ts-expect-error - our root element is not null
-const root = createRoot(document.getElementById('root'));
-root.render(<App />);
+render(createElement(App), document.getElementById('root'));

packages/kernel-ui/package.json

@@ -65,8 +65,8 @@
     "@metamask/logger": "workspace:^",
     "@metamask/ocap-kernel": "workspace:^",
     "@metamask/utils": "^11.4.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "ses": "^1.13.0"
   },
   "devDependencies": {
@@ -76,15 +76,15 @@
     "@metamask/eslint-config-nodejs": "^14.0.0",
     "@metamask/eslint-config-typescript": "^14.0.0",
     "@ocap/test-utils": "workspace:^",
-    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.6.1",
     "@ts-bridge/cli": "^0.6.3",
     "@ts-bridge/shims": "^0.1.1",
     "@types/chrome": "^0.0.313",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^17.0.11",
+    "@types/react-dom": "^17.0.11",
     "@typescript-eslint/eslint-plugin": "^8.29.0",
     "@typescript-eslint/parser": "^8.29.0",
     "@typescript-eslint/utils": "^8.29.0",

packages/kernel-ui/src/context/PanelContext.test.tsx

@@ -1,4 +1,5 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import { describe, it, expect, vi } from 'vitest';
 
 vi.mock('@metamask/kernel-utils', () => ({
@@ -27,10 +28,6 @@ describe('PanelContext', () => {
       const { PanelProvider, usePanelContext } = await import(
         './PanelContext.tsx'
       );
-      const payload = {
-        method: 'getStatus',
-        params: [],
-      };
       const response = { success: true };
       mockSendMessage.mockResolvedValueOnce(response);
       vi.mocked(
@@ -43,19 +40,17 @@ describe('PanelContext', () => {
           </PanelProvider>
         ),
       });
-      const actualResponse = await result.current.callKernelMethod(payload);
-      expect(mockSendMessage).toHaveBeenCalledWith(payload);
+      const actualResponse = await result.current.callKernelMethod({
+        method: 'getStatus',
+        params: [],
+      });
       expect(actualResponse).toBe(response);
     });
 
     it('should throw error when response is an error', async () => {
       const { PanelProvider, usePanelContext } = await import(
         './PanelContext.tsx'
       );
-      const payload = {
-        method: 'getStatus',
-        params: [],
-      };
       const errorResponse = { error: 'Test error' };
       mockSendMessage.mockResolvedValueOnce(errorResponse);
       vi.mocked(
@@ -68,9 +63,12 @@ describe('PanelContext', () => {
           </PanelProvider>
         ),
       });
-      await expect(result.current.callKernelMethod(payload)).rejects.toThrow(
-        JSON.stringify(errorResponse.error),
-      );
+      await expect(
+        result.current.callKernelMethod({
+          method: 'getStatus',
+          params: [],
+        }),
+      ).rejects.toThrow(JSON.stringify(errorResponse.error));
       expect(
         vi.mocked(await import('../services/logger.ts')).logger.error,
       ).toHaveBeenCalledWith(
@@ -83,10 +81,6 @@ describe('PanelContext', () => {
       const { PanelProvider, usePanelContext } = await import(
         './PanelContext.tsx'
       );
-      const payload = {
-        method: 'getStatus',
-        params: [],
-      };
       const error = new Error('Network error');
       mockSendMessage.mockRejectedValueOnce(error);
       const { result } = renderHook(() => usePanelContext(), {
@@ -96,9 +90,12 @@ describe('PanelContext', () => {
           </PanelProvider>
         ),
       });
-      await expect(result.current.callKernelMethod(payload)).rejects.toThrow(
-        error,
-      );
+      await expect(
+        result.current.callKernelMethod({
+          method: 'getStatus',
+          params: [],
+        }),
+      ).rejects.toThrow(error);
       expect(
         vi.mocked(await import('../services/logger.ts')).logger.error,
       ).toHaveBeenCalledWith(`Error: ${error.message}`, 'error');
@@ -108,14 +105,6 @@ describe('PanelContext', () => {
       const { PanelProvider, usePanelContext } = await import(
         './PanelContext.tsx'
       );
-      const firstPayload = {
-        method: 'getStatus',
-        params: [],
-      };
-      const secondPayload = {
-        method: 'getStatus',
-        params: [],
-      };
 
       // Use a promise that we control to ensure the first request is still in progress
       let resolveFirstRequest!: (value: { success: boolean }) => void;
@@ -136,12 +125,17 @@ describe('PanelContext', () => {
       });
 
       // Start the first request but don't await it
-      const firstRequestPromiseResult =
-        result.current.callKernelMethod(firstPayload);
+      const firstRequestPromiseResult = result.current.callKernelMethod({
+        method: 'getStatus',
+        params: [],
+      });
 
       // Try to make a second request while the first is still processing
       await expect(
-        result.current.callKernelMethod(secondPayload),
+        result.current.callKernelMethod({
+          method: 'getStatus',
+          params: [],
+        }),
       ).rejects.toThrow('A request is already in progress');
 
       // Resolve the first request to clean up
@@ -176,17 +170,8 @@ describe('PanelContext', () => {
   describe('usePanelContext', () => {
     it('should throw error when used outside of PanelProvider', async () => {
       const { usePanelContext } = await import('./PanelContext.tsx');
-
-      // Use a try-catch block to verify the error
-      let caughtError: Error | null = null;
-      try {
-        renderHook(() => usePanelContext());
-      } catch (error) {
-        caughtError = error as Error;
-      }
-
-      // Expect the error to be thrown
-      expect(caughtError).toStrictEqual(
+      const { result } = renderHook(() => usePanelContext());
+      expect(result.error).toStrictEqual(
         new Error('usePanelContext must be used within a PanelProvider'),
       );
     });

packages/kernel-ui/src/hooks/useDatabase.test.ts

@@ -1,4 +1,5 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 import { useDatabase } from './useDatabase.ts';

packages/kernel-ui/src/hooks/useKernelActions.test.ts

@@ -1,5 +1,6 @@
 import clusterConfig from '@metamask/kernel-browser-runtime/default-cluster' assert { type: 'json' };
-import { renderHook, waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 vi.mock('../context/PanelContext.tsx', () => ({

packages/kernel-ui/src/hooks/useRegistry.test.ts

@@ -1,4 +1,5 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 import { useRegistry } from './useRegistry.ts';

packages/kernel-ui/src/hooks/useStatusPolling.test.ts

@@ -1,5 +1,6 @@
 import clusterConfig from '@metamask/kernel-browser-runtime/default-cluster' assert { type: 'json' };
-import { renderHook, waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 
 vi.mock('../services/logger.ts', () => ({

packages/kernel-ui/src/hooks/useStream.test.ts

@@ -1,4 +1,5 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import { describe, it, expect, vi } from 'vitest';
 
 import { useStream } from './useStream.ts';

packages/kernel-ui/src/hooks/useVats.test.ts

@@ -1,6 +1,7 @@
 import type { VatConfig } from '@metamask/ocap-kernel';
 import { setupOcapKernelMock } from '@ocap/test-utils';
-import { renderHook, waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 import type { PanelContextType } from '../context/PanelContext.tsx';

vitest.config.ts

@@ -80,10 +80,10 @@ export default defineConfig({
           lines: 100,
         },
         'packages/extension/**': {
-          statements: 5.88,
+          statements: 3.03,
           functions: 0,
           branches: 100,
-          lines: 5.88,
+          lines: 3.03,
         },
         'packages/kernel-browser-runtime/**': {
           statements: 78,