diff --git a/__tests__/api/meta.test.tsx b/__tests__/api/meta.test.tsx index 86b65de4..727df9cb 100644 --- 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( { expect(existingTags).toHaveLength(0); - expect(console.error).toHaveBeenCalled(); expect(console.warn).toHaveBeenCalled(); expect((console.warn as MockedFunction).mock.calls[0][0]).toMatchSnapshot(); diff --git a/__tests__/setup-test-env.ts b/__tests__/setup-test-env.ts index fa56c9c4..81860577 100644 --- 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 index 4c2c8904..82a97546 100644 --- 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( - - {node} - , - document.getElementById('mount') - ); + if (!root) { + const elem = document.getElementById('mount') as HTMLElement; + root = createRoot(elem); + } + + act(() => { + root?.render( + + {node} + + ); + }); }; export const renderContext = (node: ReactNode) => {