search-ui-react: Resolve errors in remaining test files

Resolves errors that were being logged due to package upgrades in test files. These were prevent our automatic checks from passing.

src/components/MapboxMap.tsx

@@ -3,6 +3,7 @@ import mapboxgl from 'mapbox-gl';
 import { Result, useSearchState } from '@yext/search-headless-react';
 import { useDebouncedFunction } from '../hooks/useDebouncedFunction';
 import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 
 /**
  * Props for rendering a custom marker on the map.
@@ -158,18 +159,19 @@ export function MapboxMap<T>({
         if (markerLocation) {
           const { latitude, longitude } = markerLocation;
           const el = document.createElement('div');
+          const root = createRoot(el);
           const markerOptions: mapboxgl.MarkerOptions = {};
           if (PinComponent) {
             if (renderPin) {
               console.warn(
                 'Found both PinComponent and renderPin props. Using PinComponent.'
               );
             }
-            ReactDOM.render(<PinComponent
+            root.render(<PinComponent
               index={i}
               mapbox={mapbox}
               result={result}
-            />, el);
+            />);
             markerOptions.element = el;
           } else if (renderPin) {
             renderPin({ index: i, mapbox, result, container: el });

tests/components/DirectAnswer.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import {render, screen, waitFor} from '@testing-library/react';
 import { DirectAnswerState } from '@yext/search-headless-react';
 import { useAnalytics } from '../../src/hooks/useAnalytics';
 import { DirectAnswer } from '../../src/components/DirectAnswer';
@@ -7,6 +7,14 @@ import { fieldValueDAState, featuredSnippetDAState } from '../__fixtures__/data/
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
+function renderElement(element: React.ReactElement) {
+  return React.act(() => render(element));
+}
+
+async function click(element : HTMLElement) {
+  return waitFor(() => userEvent.click(element));
+}
+
 jest.mock('@yext/search-headless-react');
 
 jest.mock('../../src/hooks/useAnalytics', () => {
@@ -34,10 +42,10 @@ describe('Featured snippet direct answer analytics', () => {
 
 function runAnalyticsTestSuite() {
   it('reports link click analytics', async () => {
-    render(<DirectAnswer />);
+    await renderElement(<DirectAnswer />);
     ignoreLinkClickErrors();
     const link = screen.getByRole('link');
-    await userEvent.click(link);
+    await click(link);
     expect(useAnalytics()?.report).toHaveBeenCalledTimes(1);
     expect(useAnalytics()?.report).toHaveBeenCalledWith(expect.objectContaining({
       type: 'CTA_CLICK',
@@ -48,9 +56,9 @@ function runAnalyticsTestSuite() {
   });
 
   it('reports THUMBS_UP feedback', async () => {
-    render(<DirectAnswer />);
+    await renderElement(<DirectAnswer />);
     const thumbsUp = screen.queryAllByRole('button')[0];
-    await userEvent.click(thumbsUp);
+    await click(thumbsUp);
     expect(useAnalytics()?.report).toHaveBeenCalledTimes(1);
     expect(useAnalytics()?.report).toHaveBeenCalledWith(expect.objectContaining({
       type: 'THUMBS_UP',
@@ -61,9 +69,9 @@ function runAnalyticsTestSuite() {
   });
 
   it('reports THUMBS_DOWN feedback', async () => {
-    render(<DirectAnswer />);
+    await renderElement(<DirectAnswer />);
     const thumbsDown = screen.queryAllByRole('button')[1];
-    await userEvent.click(thumbsDown);
+    await click(thumbsDown);
     expect(useAnalytics()?.report).toHaveBeenCalledTimes(1);
     expect(useAnalytics()?.report).toHaveBeenCalledWith(expect.objectContaining({
       type: 'THUMBS_DOWN',