use React 18 render

staylor · Nov 8, 2023 · 45633eb · 45633eb
1 parent 7e9ac3e
commit 45633eb
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/__tests__/api/meta.test.tsx b/__tests__/api/meta.test.tsx
@@ -266,7 +266,6 @@ describe('meta tags', () => {
     it('fails gracefully when meta is wrong shape', () => {
       const originalConsole = global.console;
       global.console.warn = vi.fn();
-      global.console.error = vi.fn();
 
       render(
         <Helmet
@@ -282,7 +281,6 @@ describe('meta tags', () => {
 
       expect(existingTags).toHaveLength(0);
 
-      expect(console.error).toHaveBeenCalled();
       expect(console.warn).toHaveBeenCalled();
 
       expect((console.warn as MockedFunction<any>).mock.calls[0][0]).toMatchSnapshot();

diff --git a/__tests__/setup-test-env.ts b/__tests__/setup-test-env.ts
@@ -1,8 +1,12 @@
 import '@testing-library/jest-dom';
-import ReactDOM from 'react-dom';
 
 import { clearInstances } from '../src/HelmetData';
 
+import { unmount } from './utils';
+
+// @ts-ignore
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
 let headElement: HTMLHeadElement;
 
 beforeEach(() => {
@@ -13,10 +17,7 @@ beforeEach(() => {
 });
 
 afterEach(() => {
-  const mount = document.getElementById('mount');
-  if (mount) {
-    ReactDOM.unmountComponentAtNode(mount);
-  }
+  unmount();
 
   clearInstances();
 });
diff --git a/__tests__/utils.tsx b/__tests__/utils.tsx
@@ -1,16 +1,33 @@
 import type { ReactNode } from 'react';
 import React, { StrictMode } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import type { Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
 
 import Provider from '../src/Provider';
 
+let root: Root | null = null;
+
+export const unmount = () => {
+  act(() => {
+    root?.unmount();
+    root = null;
+  });
+};
+
 export const render = (node: ReactNode, context = {} as any) => {
-  ReactDOM.render(
-    <StrictMode>
-      <Provider context={context}>{node}</Provider>
-    </StrictMode>,
-    document.getElementById('mount')
-  );
+  if (!root) {
+    const elem = document.getElementById('mount') as HTMLElement;
+    root = createRoot(elem);
+  }
+
+  act(() => {
+    root?.render(
+      <StrictMode>
+        <Provider context={context}>{node}</Provider>
+      </StrictMode>
+    );
+  });
 };
 
 export const renderContext = (node: ReactNode) => {