test(fluentui/react): fix initial global leaks that were causing OOM …

…issues (#27661)

* test(fluentui/react): fix initial global leaks that were causing OOM issues

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

@@ -68,19 +68,16 @@ function customColumnDivider(
 
 describe('DetailsList', () => {
   let spy: jest.SpyInstance;
-  beforeAll(() => {
+  beforeEach(() => {
     /* eslint-disable-next-line @typescript-eslint/no-empty-function */
     spy = jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
+    resetIds();
   });
 
   afterAll(() => {
     spy.mockRestore();
   });
 
-  beforeEach(() => {
-    resetIds();
-  });
-
   afterEach(() => {
     if ((setTimeout as unknown as jest.Mock).mock) {
       jest.runOnlyPendingTimers();

packages/react/src/components/DetailsList/DetailsListV2.test.tsx

@@ -77,7 +77,8 @@ const groupProps: IDetailsGroupRenderProps = {
  */
 describe('DetailsListV2', () => {
   let spy: jest.SpyInstance;
-  beforeAll(() => {
+
+  beforeEach(() => {
     /* eslint-disable-next-line @typescript-eslint/no-empty-function */
     spy = jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
   });

packages/react/src/components/Dialog/Dialog.deprecated.test.tsx

@@ -6,24 +6,24 @@ import { resetIds, setWarningCallback } from '../../Utilities';
 import { DialogBase } from './Dialog.base';
 
 describe('Dialog deprecated props', () => {
-  beforeEach(() => {
-    resetIds();
+  beforeAll(() => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const noop = () => {};
+    // Prevent warn deprecations from failing test
+    setWarningCallback(noop);
   });
 
-  afterAll(() => {
+  beforeEach(() => {
     resetIds();
-  });
-
-  beforeAll(() => {
-    // Prevent warn deprecations from failing test
-    setWarningCallback(() => {
-      /* no-op */
-    });
     (ReactDOM.createPortal as any) = jest.fn((element, node) => {
       return element;
     });
   });
 
+  afterAll(() => {
+    setWarningCallback();
+  });
+
   afterEach(() => {
     (ReactDOM.createPortal as any).mockClear();
     jest.useRealTimers();

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

@@ -14,11 +14,6 @@ describe('Dialog', () => {
     resetIds();
   });
 
-  afterEach(() => {
-    setWarningCallback();
-    jest.useRealTimers();
-  });
-
   afterAll(() => {
     resetIds();
   });
@@ -86,11 +81,14 @@ describe('Dialog', () => {
 
     expect(queryByRole('dialog')).toBeFalsy();
     expect(onDismissed).toHaveBeenCalledTimes(1);
+
+    jest.useRealTimers();
   });
 
   it('deprecated isOpen controls open state of the dialog', () => {
     // suppress deprecation warning as error
-    setWarningCallback(() => undefined);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setWarningCallback(() => {});
     jest.useFakeTimers();
     const onDismissed = jest.fn();
 
@@ -106,6 +104,9 @@ describe('Dialog', () => {
 
     expect(queryByRole('dialog')).toBeFalsy();
     expect(onDismissed).toHaveBeenCalledTimes(1);
+
+    jest.useRealTimers();
+    setWarningCallback();
   });
 
   it('Properly attaches auto-generated aria attributes IDs', () => {
@@ -154,7 +155,7 @@ describe('Dialog', () => {
       <DialogBase
         hidden={false}
         modalProps={{
-          titleAriaId: titleAriaId,
+          titleAriaId,
         }}
         dialogContentProps={{
           title: 'sample title',
@@ -170,7 +171,8 @@ describe('Dialog', () => {
 
   it('deprecated titleId prop should be used if titleProps.id is not passed', () => {
     // Prevent warn deprecations from failing test
-    setWarningCallback(() => undefined);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setWarningCallback(() => {});
 
     const titleId = 'title_id';
     render(
@@ -185,10 +187,13 @@ describe('Dialog', () => {
 
     const dialogTitle = document.getElementById(titleId);
     expect(dialogTitle).toBeTruthy();
+
+    setWarningCallback();
   });
 
   it('deprecated titleId prop should not be used if titleProps.id is undefined', () => {
-    setWarningCallback(() => undefined);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setWarningCallback(() => {});
 
     const titleId = 'title_id';
     render(
@@ -204,10 +209,13 @@ describe('Dialog', () => {
 
     const dialogTitle = document.getElementById(titleId);
     expect(dialogTitle).toBeFalsy();
+
+    setWarningCallback();
   });
 
   it('titleProps.id should be used if deprecated titleId is also passed', () => {
-    setWarningCallback(() => undefined);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setWarningCallback(() => {});
 
     const titleId = 'title_id';
     render(
@@ -223,6 +231,8 @@ describe('Dialog', () => {
 
     const dialogTitle = document.getElementById(titleId);
     expect(dialogTitle).toBeTruthy();
+
+    setWarningCallback();
   });
 
   describe('enableAriaHiddenSiblings', () => {

packages/style-utilities/src/styles/theme.test.ts

@@ -10,24 +10,35 @@ describe('registerOnThemeChangeCallback', () => {
     expect(callback.mock.calls.length).toBe(0);
   });
 
-  it('calls the previously registered callback', () => {
+  it('calls previously registered callback', () => {
+    registerOnThemeChangeCallback(callback);
     loadTheme({});
     expect(callback.mock.calls.length).toBe(1);
   });
 
   it('calls the previously registered callback (again)', () => {
+    registerOnThemeChangeCallback(callback);
+    loadTheme({});
     loadTheme({});
     expect(callback.mock.calls.length).toBe(2);
   });
 
   it('unregisters the callback, and doesnt call it again', () => {
+    registerOnThemeChangeCallback(callback);
+    loadTheme({});
+    loadTheme({});
     removeOnThemeChangeCallback(callback);
+
     expect(callback.mock.calls.length).toBe(2);
     loadTheme({});
     expect(callback.mock.calls.length).toBe(2);
   });
 
   it('didnt pass null to the callback', () => {
+    registerOnThemeChangeCallback(callback);
+    loadTheme({});
+    loadTheme({});
+
     expect(callback.mock.calls[0][0]).toBeTruthy();
     expect(callback.mock.calls[1][0]).toBeTruthy();
   });
@@ -37,7 +48,7 @@ describe('loadTheme', () => {
   describe('specify defaultFontStyle', () => {
     it('applies defaultFontStyle to fonts and retains all other default values', () => {
       const defaultFontStyle: IRawStyle = { fontFamily: 'Segoe UI' };
-      const userTheme = { defaultFontStyle: defaultFontStyle };
+      const userTheme = { defaultFontStyle };
       loadTheme(userTheme);
       const newTheme = getTheme();
 
@@ -58,7 +69,7 @@ describe('loadTheme', () => {
     });
     it('applies defaultFontStyle and fonts to theme and retains all other default values', () => {
       const defaultFontStyle: IRawStyle = { fontFamily: 'Foo', fontSize: '10px' };
-      const userTheme = { defaultFontStyle: defaultFontStyle, fonts: { small: { fontSize: '20px' } } };
+      const userTheme = { defaultFontStyle, fonts: { small: { fontSize: '20px' } } };
       loadTheme(userTheme);
       const newTheme = getTheme();
 

scripts/jest/src/jest.preset.v8.js

@@ -79,6 +79,8 @@ const createConfig = (customConfig = {}) => {
       url: 'http://localhost',
     },
     testEnvironment: 'jsdom',
+    restoreMocks: true,
+    clearMocks: true,
 
     watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
   };

scripts/jest/src/jest.preset.v8.spec.ts

@@ -35,6 +35,8 @@ describe(`v8 preset`, () => {
         transform: {
           '^.+\\.tsx?$': 'ts-jest',
         },
+        restoreMocks: true,
+        clearMocks: true,
         transformIgnorePatterns: ['/node_modules/', '/lib-commonjs/', '\\.js$'],
         watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
       }),