Fix test issues discovered while trying to test React 17 (take 2) (microsoft#21032)

Author: ecraig12345

change/@fluentui-react-ab8e2990-b17d-4210-b514-30a0cb04b452.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fix test issues",
+  "packageName": "@fluentui/react",
+  "email": "elcraig@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-experiments-0b77bb7d-5bbe-457b-95c9-6a5970609121.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fix test issues",
+  "packageName": "@fluentui/react-experiments",
+  "email": "elcraig@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-hooks-c07633ea-c71c-4e99-9a4a-cc10394bf71c.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fix test issues",
+  "packageName": "@fluentui/react-hooks",
+  "email": "elcraig@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-test-utilities-493d57c1-c975-4c23-aea6-fd2dff463193.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Simplify safeMount attach API",
+  "packageName": "@fluentui/test-utilities",
+  "email": "elcraig@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-utilities-2d40b849-0e8a-4a69-a942-c4454fdde763.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fix test issues",
+  "packageName": "@fluentui/utilities",
+  "email": "elcraig@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/react-experiments/src/components/FloatingSuggestionsComposite/FloatingSuggestionsComposite.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { create, act } from 'react-test-renderer';
+import { create } from 'react-test-renderer';
 import { BaseFloatingSuggestions } from './FloatingSuggestions';
 import * as ReactDOM from 'react-dom';
 import * as ReactTestUtils from 'react-dom/test-utils';
@@ -95,7 +95,7 @@ describe('FloatingSuggestions', () => {
     // since callout mount a new react root with ReactDOM.
     //
     // see https://github.com/facebook/react/pull/12895
-    act(() => {
+    ReactTestUtils.act(() => {
       (ReactDOM.render(
         <BaseFloatingSuggestions
           suggestions={_suggestions}
@@ -130,7 +130,7 @@ describe('FloatingSuggestions', () => {
   });
 
   it('renders FloatingSuggestions and updates when suggestions are removed', () => {
-    act(() => {
+    ReactTestUtils.act(() => {
       (ReactDOM.render(
         <BaseFloatingSuggestions
           suggestions={_suggestions}
@@ -165,7 +165,7 @@ describe('FloatingSuggestions', () => {
 
   it('shows no suggestions when no suggestions are provided', () => {
     _suggestions = [];
-    act(() => {
+    ReactTestUtils.act(() => {
       (ReactDOM.render(
         <BaseFloatingSuggestions
           suggestions={_suggestions}

packages/react-hooks/src/useUnmount.test.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as ReactTestUtils from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import { useUnmount } from './useUnmount';
 
@@ -17,7 +18,9 @@ describe('useUnmount', () => {
     expect(onUnmount).toBeCalledTimes(0);
     const wrapper = mount(<TestComponent />);
     expect(onUnmount).toBeCalledTimes(0);
-    wrapper.unmount();
+    ReactTestUtils.act(() => {
+      wrapper.unmount();
+    });
     expect(onUnmount).toBeCalledTimes(1);
   });
 });

packages/react/__mocks__/@fluentui/utilities.ts

@@ -36,7 +36,9 @@ class MockAsync extends Async {
   }
 
   public dispose() {
-    clearTimeout(this._timeoutId);
+    if (this._timeoutId) {
+      clearTimeout(this._timeoutId);
+    }
     this._timeoutId = undefined;
 
     super.dispose();

packages/react/src/common/testUtilities.ts

@@ -28,6 +28,7 @@ export function delay(millisecond: number): Promise<void> {
 /**
  * Mounts the element attached to a child of document.body. This is primarily for tests involving
  * event handlers (which don't work right unless the element is attached).
+ * @deprecated Use `safeMount` from `@fluentui/test-utilities` instead
  */
 export function mountAttached<C extends Component, P = C['props'], S = C['state']>(
   element: React.ReactElement<P>,

packages/react/src/components/ChoiceGroup/ChoiceGroup.test.tsx

@@ -5,7 +5,7 @@ import * as renderer from 'react-test-renderer';
 
 import { ChoiceGroup } from './ChoiceGroup';
 import { merge, resetIds } from '../../Utilities';
-import { mountAttached } from '../../common/testUtilities';
+import { safeMount } from '@fluentui/test-utilities';
 import { isConformant } from '../../common/isConformant';
 import type { IChoiceGroupOption, IChoiceGroup, IChoiceGroupProps } from './ChoiceGroup.types';
 
@@ -253,30 +253,34 @@ describe('ChoiceGroup', () => {
   it('can focus the checked option', () => {
     // This test has to mount the element to the document since ChoiceGroup.focus() uses document.getElementById()
     const choiceGroupRef = React.createRef<IChoiceGroup>();
-    choiceGroup = mountAttached(
+    safeMount(
       <ChoiceGroup options={TEST_OPTIONS} defaultSelectedKey="1" componentRef={choiceGroupRef} />,
+      choiceGroup2 => {
+        const option = choiceGroup2.getDOMNode().querySelector(CHOICE_QUERY_SELECTOR) as HTMLInputElement;
+        const focusSpy = jest.spyOn(option, 'focus');
+
+        choiceGroupRef.current!.focus();
+        expect(focusSpy).toHaveBeenCalled();
+      },
+      true /* attach */,
     );
-
-    const option = choiceGroup.getDOMNode().querySelector(CHOICE_QUERY_SELECTOR) as HTMLInputElement;
-    const focusSpy = jest.spyOn(option, 'focus');
-
-    choiceGroupRef.current!.focus();
-    expect(focusSpy).toHaveBeenCalled();
   });
 
   it('can focus the first enabled option', () => {
     const choiceGroupRef = React.createRef<IChoiceGroup>();
-    choiceGroup = mountAttached(
+    safeMount(
       <ChoiceGroup
         options={[{ key: '0', text: 'disabled', disabled: true }, ...TEST_OPTIONS]}
         componentRef={choiceGroupRef}
       />,
+      choiceGroup2 => {
+        const option = choiceGroup2.getDOMNode().querySelectorAll(CHOICE_QUERY_SELECTOR)![1] as HTMLInputElement;
+        const focusSpy = jest.spyOn(option, 'focus');
+
+        choiceGroupRef.current!.focus();
+        expect(focusSpy).toHaveBeenCalled();
+      },
+      true /* attach */,
     );
-
-    const option = choiceGroup.getDOMNode().querySelectorAll(CHOICE_QUERY_SELECTOR)![1] as HTMLInputElement;
-    const focusSpy = jest.spyOn(option, 'focus');
-
-    choiceGroupRef.current!.focus();
-    expect(focusSpy).toHaveBeenCalled();
   });
 });