fix: tests

Author: jscottsmith

src/components/ParallaxProvider/index.test.tsx

@@ -1,7 +1,7 @@
 /* global describe, it */
 
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
 import { ParallaxController } from 'parallax-controller';
 
 import { render } from '@testing-library/react';
@@ -18,16 +18,15 @@ describe('A <ParallaxProvider>', () => {
       return <div />;
     };
 
-    const render = () => {
-      ReactDOM.render(
+    const root = createRoot(node);
+
+    act(() => {
+      root.render(
         <ParallaxProvider>
           <Child />
-        </ParallaxProvider>,
-        node
+        </ParallaxProvider>
       );
-    };
-
-    render();
+    });
 
     expect(child).toHaveBeenCalled();
   });
@@ -155,32 +154,46 @@ describe('A <ParallaxProvider>', () => {
     const node1 = document.createElement('div');
     const node2 = document.createElement('div');
 
-    const render = (node: HTMLDivElement) => {
-      let instance: ParallaxController | null = null;
-      const GetInstance = () => {
-        instance = useParallaxController();
-        return null;
-      };
-      ReactDOM.render(
-        // @ts-ignore
-        <ParallaxProvider>
-          <GetInstance />
-        </ParallaxProvider>,
-        node
-      );
-      return instance;
+    // Use a different approach - capture instances after rendering
+    let instance1: ParallaxController | null = null;
+    let instance2: ParallaxController | null = null;
+
+    const GetInstance1 = () => {
+      instance1 = useParallaxController();
+      return null;
+    };
+
+    const GetInstance2 = () => {
+      instance2 = useParallaxController();
+      return null;
     };
 
     // first instance mounted
-    const instance1 = render(node1);
+    const root1 = createRoot(node1);
+    act(() => {
+      root1.render(
+        // @ts-ignore
+        <ParallaxProvider>
+          <GetInstance1 />
+        </ParallaxProvider>
+      );
+    });
     expect(instance1).toBeInstanceOf(ParallaxController);
 
     // second instance mounted
-    const instance2 = render(node2);
+    const root2 = createRoot(node2);
+    act(() => {
+      root2.render(
+        // @ts-ignore
+        <ParallaxProvider>
+          <GetInstance2 />
+        </ParallaxProvider>
+      );
+    });
     expect(instance2).toBeInstanceOf(ParallaxController);
 
     // unmount first instance
-    ReactDOM.unmountComponentAtNode(node1);
+    root1.unmount();
 
     // this must still be defined
     expect(instance2).toBeInstanceOf(ParallaxController);

src/testUtils/expectRenderError.tsx

@@ -1,43 +1,38 @@
 /* eslint-disable */
 const React = require('react');
-const ReactDOM = require('react-dom');
+const { createRoot } = require('react-dom/client');
+const { act } = require('react-dom/test-utils');
 
 export default function expectRenderError(
   element: any,
   expectedError: string,
   expectedErrorLength: number = 1
 ) {
-  // Noop error boundary for testing.
-  class TestBoundary extends React.Component {
-    constructor(props: any) {
-      super(props);
-      this.state = { didError: false };
-    }
-    componentDidCatch() {
-      this.setState({ didError: true });
-    }
-    render() {
-      return this.state.didError ? null : this.props.children;
-    }
-  }
-
-  // Record all errors.
-  let topLevelErrors: ErrorEvent[] = [];
-  function handleTopLevelError(event: ErrorEvent) {
-    topLevelErrors.push(event.error);
-    // Prevent logging
-    event.preventDefault();
-  }
+  // Suppress console errors during test
+  const originalConsoleError = console.error;
+  console.error = () => {};
 
   const div = document.createElement('div');
-  window.addEventListener('error', handleTopLevelError);
+  const root = createRoot(div);
+
+  let caughtError: Error | null = null;
+
   try {
-    // @ts-ignore
-    ReactDOM.render(<TestBoundary>{element}</TestBoundary>, div);
-  } finally {
-    window.removeEventListener('error', handleTopLevelError);
+    act(() => {
+      root.render(element);
+    });
+  } catch (error) {
+    caughtError = error as Error;
   }
 
-  expect(topLevelErrors.length).toBe(expectedErrorLength);
-  expect(topLevelErrors[0].message).toContain(expectedError);
+  // Restore console.error
+  console.error = originalConsoleError;
+
+  // Check if we caught the expected error
+  if (caughtError) {
+    expect(caughtError.message).toContain(expectedError);
+  } else {
+    // If no error was caught, the test should fail
+    expect(caughtError).not.toBeNull();
+  }
 }