Hotell · Hotell · Nov 29, 2021 · Nov 24, 2021 · Nov 24, 2021 · Nov 24, 2021
diff --git a/packages/jest-serializer-make-styles/etc/jest-serializer-make-styles.api.md b/packages/jest-serializer-make-styles/etc/jest-serializer-make-styles.api.md
@@ -5,16 +5,13 @@
 ```ts
 
 // @public (undocumented)
-function print_2(val: string): string;
-
+function print_2(val: unknown): string;
 export { print_2 as print }
 
 // @public (undocumented)
 function test_2(val: unknown): boolean;
-
 export { test_2 as test }
 
-
 // (No @packageDocumentation comment for this package)
 
 ```
diff --git a/packages/jest-serializer-make-styles/src/index.ts b/packages/jest-serializer-make-styles/src/index.ts
@@ -1,6 +1,9 @@
 import { DEFINITION_LOOKUP_TABLE, CSSClasses } from '@fluentui/make-styles';
 
-export function print(val: string) {
+export function print(val: unknown) {
+  if (typeof val !== 'string') {
+    throw new Error(`Expected "val" to be string but received a "${typeof val}" type.`);
+  }
   const regexParts: string[] = [];
   const regex = lookupRegex();
   if (!regex) {

diff --git a/packages/react/__mocks__/@fluentui/utilities.ts b/packages/react/__mocks__/@fluentui/utilities.ts
@@ -8,14 +8,14 @@ declare function setTimeout(cb: Function, delay: number): number;
 // https://github.com/facebook/jest/issues/3465
 // Mock impl inspired from issue.
 class MockAsync extends Async {
-  private _timeoutId: number | null;
+  private _timeoutId: number | undefined;
 
   public debounce(callback: Function, timeout: number) {
-    this._timeoutId = null;
+    this._timeoutId = undefined;
     const debounced = (...args: any[]) => {
       if (this._timeoutId) {
         clearTimeout(this._timeoutId);
-        this._timeoutId = null;
+        this._timeoutId = undefined;
       }
       // Callback functions throughout repo aren't binding properly, so we have to access
       // Async's private _parent member and invoke callbacks the same way Async.debounce does.
@@ -26,7 +26,7 @@ class MockAsync extends Async {
     const cancel = () => {
       if (this._timeoutId) {
         clearTimeout(this._timeoutId);
-        this._timeoutId = null;
+        this._timeoutId = undefined;
       }
     };
 
@@ -37,7 +37,7 @@ class MockAsync extends Async {
 
   public dispose() {
     clearTimeout(this._timeoutId);
-    this._timeoutId = null;
+    this._timeoutId = undefined;
 
     super.dispose();
   }

diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.test.tsx b/packages/react/src/components/ContextualMenu/ContextualMenu.test.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import * as ReactTestUtils from 'react-dom/test-utils';
 import { KeyCodes } from '../../Utilities';
 import { FocusZoneDirection } from '../../FocusZone';
@@ -9,6 +10,7 @@ import { canAnyMenuItemsCheck } from './ContextualMenu.base';
 import { ContextualMenuItemType } from './ContextualMenu.types';
 import { DefaultButton } from '../../Button';
 import { resetIds } from '@fluentui/utilities';
+import { createTestContainer } from '@fluentui/test-utilities';
 import { isConformant } from '../../common/isConformant';
 import type {
   IContextualMenuProps,
@@ -588,8 +590,10 @@ describe('ContextualMenu', () => {
       },
     ];
 
+    const { removeTestContainer, testContainer } = createTestContainer();
+
     ReactTestUtils.act(() => {
-      ReactTestUtils.renderIntoDocument<IContextualMenuProps>(<ContextualMenu items={items} />);
+      ReactDOM.render(<ContextualMenu items={items} />, testContainer);
     });
 
     const menuItems = document.querySelectorAll('button.ms-ContextualMenu-link') as NodeListOf<HTMLButtonElement>;
@@ -606,6 +610,8 @@ describe('ContextualMenu', () => {
     menuItems[2].focus();
     expect(document.activeElement!.textContent).toEqual('TestText 3');
     expect(document.activeElement!.className.split(' ')).toContain('is-disabled');
+
+    removeTestContainer();
   });
 
   it('cannot click on disabled items', () => {
@@ -849,8 +855,10 @@ describe('ContextualMenu', () => {
       },
     ];
 
+    const { removeTestContainer, testContainer } = createTestContainer();
+
     ReactTestUtils.act(() => {
-      ReactTestUtils.renderIntoDocument<IContextualMenuProps>(<ContextualMenu items={items} />);
+      ReactDOM.render(<ContextualMenu items={items} />, testContainer);
     });
 
     ReactTestUtils.act(() => {
@@ -864,6 +872,8 @@ describe('ContextualMenu', () => {
       jest.runAllTimers();
     });
     expect(document.activeElement).toEqual(itemToFocus);
+
+    removeTestContainer();
   });
 
   it('merges callout classNames', () => {
@@ -1095,11 +1105,11 @@ describe('ContextualMenu', () => {
     });
 
     it('Menu should correctly return focus to previously focused element when dismissed and document has focus', () => {
-      const temp = ReactTestUtils.renderIntoDocument<HTMLDivElement>(
-        <div>
-          <DefaultButton menuProps={{ items: menu }} text="but" id="btn" />
-        </div>,
-      ) as HTMLElement;
+      const { removeTestContainer, testContainer: temp } = createTestContainer();
+
+      ReactTestUtils.act(() => {
+        ReactDOM.render(<DefaultButton menuProps={{ items: menu }} text="but" id="btn" />, temp);
+      });
 
       // Get and make sure that the button is the active element
       const btn = temp.querySelector('#btn')! as HTMLElement;
@@ -1129,6 +1139,8 @@ describe('ContextualMenu', () => {
       if (document.hasFocus()) {
         expect(document.activeElement).toEqual(btn);
       }
+
+      removeTestContainer();
     });
   });
 

diff --git a/packages/react/src/components/DetailsList/DetailsList.test.tsx b/packages/react/src/components/DetailsList/DetailsList.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as renderer from 'react-test-renderer';
 import { ReactWrapper } from 'enzyme';
-import { safeMount } from '@fluentui/test-utilities';
+import { createTestContainer, safeMount } from '@fluentui/test-utilities';
 import { EventGroup, KeyCodes, resetIds } from '../../Utilities';
 import { SelectionMode, Selection, SelectionZone } from '../../Selection';
 import { getTheme } from '../../Styling';
@@ -69,6 +69,12 @@ function customColumnDivider(
 describe('DetailsList', () => {
   beforeEach(() => {
     resetIds();
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
   });
 
   it('renders List correctly with onRenderDivider props', () => {
@@ -127,8 +133,6 @@ describe('DetailsList', () => {
   });
 
   it('renders a single proportional column with correct width', () => {
-    jest.useFakeTimers();
-
     let component: IDetailsList | null;
     safeMount(
       <DetailsList
@@ -182,8 +186,6 @@ describe('DetailsList', () => {
   });
 
   it('renders proportional columns with proper width ratios', () => {
-    jest.useFakeTimers();
-
     let component: IDetailsList | null;
     safeMount(
       <DetailsList
@@ -234,8 +236,6 @@ describe('DetailsList', () => {
   });
 
   it('renders proportional columns with proper width ratios when delayFirstMeasure', () => {
-    jest.useFakeTimers();
-
     let component: IDetailsList | null;
     safeMount(
       <DetailsList
@@ -330,6 +330,8 @@ describe('DetailsList', () => {
   it('focuses row by index', () => {
     jest.useFakeTimers();
 
+    const { removeTestContainer, testContainer } = createTestContainer();
+
     let component: IDetailsList | null;
     safeMount(
       <DetailsList
@@ -349,7 +351,9 @@ describe('DetailsList', () => {
         }, 0);
         jest.runOnlyPendingTimers();
       },
+      { attachTo: testContainer },
     );
+    removeTestContainer();
   });
 
   it('invokes optional onRenderMissingItem prop once per missing item rendered', () => {
@@ -500,7 +504,7 @@ describe('DetailsList', () => {
       return valueKey;
     };
 
-    jest.useFakeTimers();
+    const { removeTestContainer, testContainer } = createTestContainer();
 
     let component: IDetailsList | null;
     safeMount(
@@ -533,11 +537,13 @@ describe('DetailsList', () => {
         expect((document.activeElement as HTMLElement).textContent).toEqual('4');
         expect((document.activeElement as HTMLElement).className.split(' ')).toContain('test-column');
       },
+      { attachTo: testContainer },
     );
+    removeTestContainer();
   });
 
   it('reset focusedItemIndex when setKey updates', () => {
-    jest.useFakeTimers();
+    const { removeTestContainer, testContainer } = createTestContainer();
 
     let component: any;
 
@@ -552,28 +558,28 @@ describe('DetailsList', () => {
       />,
       (wrapper: ReactWrapper) => {
         expect(component).toBeTruthy();
-        component.setState({ focusedItemIndex: 3 });
-        setTimeout(() => {
-          expect(component.state.focusedItemIndex).toEqual(3);
-        }, 0);
+        component!.focusIndex(3);
         jest.runOnlyPendingTimers();
+        expect(
+          (document.activeElement as HTMLElement).querySelector('[data-automationid=DetailsRowCell]')!.textContent,
+        ).toEqual('3');
 
         // update props to new setKey
         const newProps = { items: mockData(7), setKey: 'set2', initialFocusedIndex: 0 };
         wrapper.setProps(newProps);
         wrapper.update();
 
-        // verify that focusedItemIndex is reset to 0 and 0th row is focused
         setTimeout(() => {
-          expect(component.state.focusedItemIndex).toEqual(0);
           expect(
             (document.activeElement as HTMLElement).querySelector('[data-automationid=DetailsRowCell]')!.textContent,
           ).toEqual('0');
           expect((document.activeElement as HTMLElement).className.split(' ')).toContain('ms-DetailsRow');
         }, 0);
         jest.runOnlyPendingTimers();
       },
+      { attachTo: testContainer },
     );
+    removeTestContainer();
   });
 
   it('invokes optional onColumnResize callback per IColumn if defined when columns are adjusted', () => {