Updating Jest to v27 (#2671)

* Updating Jest to v27

* fix lint

* fix TS

* update yarn.lock

* solved listbox difference

* solved dnd issue and addressed jsdom upgrade

* fix lint

Co-authored-by: Danni <[email protected]>

Author: snowystinger

package.json

@@ -125,10 +125,11 @@
     "full-icu": "^1.3.0",
     "identity-obj-proxy": "^3.0.0",
     "ignore-styles": "^5.0.1",
-    "jest": "^26.4.2",
+    "jest": "^27.4.3",
+    "jest-environment-jsdom": "^27.4.3",
     "jest-junit": "^12.0.0",
     "jest-matchmedia-mock": "^1.0.0",
-    "jsdom": "^16.3.0",
+    "jsdom": "^16.7.0",
     "json-diff-ts": "^1.1.0",
     "lerna": "^3.13.2",
     "lfcdn": "^0.4.2",
@@ -178,7 +179,6 @@
     "@babel/core": "7.12.10",
     "@babel/runtime": "7.12.5",
     "postcss-calc": "6.0.2",
-    "jest-environment-jsdom": "26.3.0",
-    "jsdom": "16.3.0"
+    "jsdom": "16.7.0"
   }
 }

packages/@react-aria/aria-modal-polyfill/test/index.test.js

@@ -25,7 +25,7 @@ import {watchModals} from '../';
 describe('watchModals', () => {
   let matchMedia;
   beforeAll(() => {
-    jest.useFakeTimers();
+    jest.useFakeTimers('legacy');
   });
   afterAll(() => {
     jest.useRealTimers();

packages/@react-aria/calendar/test/useCalendar.test.js

@@ -17,15 +17,10 @@ import React from 'react';
 
 describe('useCalendar', () => {
   beforeAll(() => {
-    jest.useFakeTimers();
+    jest.useFakeTimers('legacy');
     jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb());
   });
 
-  afterAll(() => {
-    jest.useRealTimers();
-    window.requestAnimationFrame.mockRestore();
-  });
-
   afterEach(() => {
     // clear any live announcers
     act(() => {

packages/@react-aria/color/test/useColorWheel.test.tsx

@@ -52,22 +52,15 @@ function ColorWheel(props: ColorWheelProps) {
 describe('useColorWheel', () => {
   let onChangeSpy = jest.fn();
 
-  afterEach(() => {
-    onChangeSpy.mockClear();
-  });
-
   beforeAll(() => {
     // @ts-ignore
     jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb());
-    jest.useFakeTimers();
-  });
-  afterAll(() => {
-    jest.useRealTimers();
     // @ts-ignore
-    window.requestAnimationFrame.mockRestore();
+    jest.useFakeTimers('legacy');
   });
 
   afterEach(() => {
+    onChangeSpy.mockClear();
     // for restoreTextSelection
     jest.runAllTimers();
   });

packages/@react-aria/dnd/src/DragManager.ts

@@ -168,17 +168,9 @@ class DragSession {
       document.addEventListener(event, this.cancelEvent, true);
     }
 
-    this.mutationObserver = new MutationObserver(() => {
-      // JSDOM has a bug where MutationObserver enters an infinite loop if mutations
-      // occur inside a MutationObserver callback. If running in Node, wait until
-      // the next tick to update valid drop targets.
-      // See https://github.com/jsdom/jsdom/issues/3096
-      if (typeof setImmediate === 'function') {
-        this.mutationImmediate = setImmediate(() => this.updateValidDropTargets());
-      } else {
-        this.updateValidDropTargets();
-      }
-    });
+    this.mutationObserver = new MutationObserver(() =>
+      this.updateValidDropTargets()
+    );
     this.updateValidDropTargets();
 
     announce(this.formatMessage(MESSAGES[getDragModality()]));

packages/@react-aria/dnd/test/dnd.test.js

@@ -11,7 +11,7 @@
  */
 
 jest.mock('@react-aria/live-announcer');
-import {act, fireEvent, render, waitFor} from '@testing-library/react';
+import {act, fireEvent, render} from '@testing-library/react';
 import {announce} from '@react-aria/live-announcer';
 import {CUSTOM_DRAG_TYPE} from '../src/constants';
 import {DataTransfer, DataTransferItem, DragEvent, FileSystemDirectoryEntry, FileSystemFileEntry} from './mocks';
@@ -31,7 +31,7 @@ describe('useDrag and useDrop', function () {
       height: 50
     }));
 
-    jest.useFakeTimers('modern');
+    jest.useFakeTimers();
   });
 
   afterEach(() => {
@@ -1121,6 +1121,7 @@ describe('useDrag and useDrop', function () {
     afterEach(() => {
       fireEvent.keyDown(document.body, {key: 'Escape'});
       fireEvent.keyUp(document.body, {key: 'Escape'});
+      act(() => jest.runAllTimers());
     });
 
     it('should perform basic drag and drop', async () => {
@@ -1414,25 +1415,22 @@ describe('useDrag and useDrop', function () {
 
         fireEvent.keyDown(draggable, {key: 'Enter'});
         fireEvent.keyUp(draggable, {key: 'Enter'});
-        act(() => jest.runAllTimers());
+        act(() => {jest.runAllTimers();});
         expect(document.activeElement).toBe(droppable2);
       });
 
       it('should handle when a drop target is hidden with aria-hidden', async () => {
-        let setShowTarget2;
-        let Test = () => {
-          let [showTarget2, _setShowTarget2] = React.useState(true);
-          setShowTarget2 = _setShowTarget2;
-          return (<>
+        let Test = (props) => (
+          <>
             <Draggable />
             <Droppable />
-            <div aria-hidden={!showTarget2 || undefined}>
+            <div aria-hidden={!props.showTarget || undefined}>
               <Droppable>Drop here 2</Droppable>
             </div>
-          </>);
-        };
+          </>
+        );
 
-        let tree = render(<Test />);
+        let tree = render(<Test showTarget />);
 
         let draggable = tree.getByText('Drag me');
         let droppable = tree.getByText('Drop here');
@@ -1448,10 +1446,12 @@ describe('useDrag and useDrop', function () {
 
         userEvent.tab();
         expect(document.activeElement).toBe(droppable2);
-
-        act(() => setShowTarget2(false));
+        // wait for the mutation observer I believe
+        await act(async () =>
+          tree.rerender(<Test />)
+        );
         expect(tree.getAllByRole('button')).toHaveLength(2);
-        await waitFor(() => expect(document.activeElement).toBe(droppable));
+        expect(document.activeElement).toBe(droppable);
 
         userEvent.tab();
         expect(document.activeElement).toBe(draggable);
@@ -2070,19 +2070,16 @@ describe('useDrag and useDrop', function () {
     });
 
     it('should handle when a non drop target element is added', async () => {
-      let setShowInput2;
-      let Test = () => {
-        let [showInput2, _setShowInput2] = React.useState(false);
-        setShowInput2 = _setShowInput2;
-        return (<>
+      let Test = (props) => (
+        <>
           <Draggable />
           <input />
           <Droppable />
-          {showInput2 &&
+          {props.showInput2 &&
             <input />
           }
-        </>);
-      };
+        </>
+      );
 
       let tree = render(<Test />);
 
@@ -2096,9 +2093,10 @@ describe('useDrag and useDrop', function () {
 
       expect(() => tree.getAllByRole('textbox')).toThrow();
 
-      act(() => setShowInput2(true));
-      // MutationObserver is async
-      await waitFor(() => expect(() => tree.getAllByRole('textbox')).toThrow());
+      await act(async () => {
+        await tree.rerender(<Test showInput2 />);
+      });
+      expect(() => tree.getAllByRole('textbox')).toThrow();
 
       fireEvent.click(draggable);
       expect(tree.getAllByRole('textbox')).toHaveLength(2);
@@ -2132,21 +2130,18 @@ describe('useDrag and useDrop', function () {
       expect(tree.getAllByRole('button')).toHaveLength(2);
     });
 
-    it('should handle when a drop target is hidden with aria-hidden', () => {
-      let setShowTarget2;
-      let Test = () => {
-        let [showTarget2, _setShowTarget2] = React.useState(true);
-        setShowTarget2 = _setShowTarget2;
-        return (<>
+    it('should handle when a drop target is hidden with aria-hidden', async () => {
+      let Test = (props) => (
+        <>
           <Draggable />
           <Droppable />
-          <div aria-hidden={!showTarget2 || undefined}>
+          <div aria-hidden={!props.showTarget2 || undefined}>
             <Droppable>Drop here 2</Droppable>
           </div>
-        </>);
-      };
+        </>
+      );
 
-      let tree = render(<Test />);
+      let tree = render(<Test showTarget2 />);
 
       let draggable = tree.getByText('Drag me');
 
@@ -2156,7 +2151,9 @@ describe('useDrag and useDrop', function () {
 
       expect(tree.getAllByRole('button')).toHaveLength(3);
 
-      act(() => setShowTarget2(false));
+      await act(async () => {
+        await tree.rerender(<Test />);
+      });
       expect(tree.getAllByRole('button')).toHaveLength(2);
     });
 

packages/@react-aria/dnd/test/useDraggableCollection.test.js

@@ -31,7 +31,7 @@ describe('useDraggableCollection', () => {
       height: 50
     }));
 
-    jest.useFakeTimers();
+    jest.useFakeTimers('legacy');
   });
 
   afterEach(() => {

packages/@react-aria/dnd/test/useDroppableCollection.test.js

@@ -63,7 +63,7 @@ describe('useDroppableCollection', () => {
       return this.getBoundingClientRect().height;
     });
 
-    jest.useFakeTimers();
+    jest.useFakeTimers('legacy');
   });
 
   afterEach(() => {

packages/@react-aria/interactions/test/useHover.test.js

@@ -38,7 +38,7 @@ function pointerEvent(type, opts) {
 
 describe('useHover', function () {
   beforeAll(() => {
-    jest.useFakeTimers();
+    jest.useFakeTimers('legacy');
   });
 
   it('does not handle hover events if disabled', function () {
@@ -531,7 +531,7 @@ describe('useHover', function () {
     }
 
     beforeAll(() => {
-      jest.useFakeTimers();
+      jest.useFakeTimers('legacy');
     });
     afterAll(() => {
       jest.useRealTimers();

packages/@react-aria/interactions/test/useLongPress.test.js

@@ -31,15 +31,10 @@ function ExampleWithPress(props) {
 
 describe('useLongPress', function () {
   beforeAll(() => {
-    jest.useFakeTimers();
+    jest.useFakeTimers('legacy');
     jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb());
   });
 
-  afterAll(() => {
-    jest.useRealTimers();
-    window.requestAnimationFrame.mockRestore();
-  });
-
   afterEach(() => {
     act(() => jest.runAllTimers());
   });