Adjust tests for React 18

Author: eps1lon

package.json

@@ -80,7 +80,7 @@
     "@semantic-release/npm": "^7.0.5",
     "@storybook/addon-actions": "^6.3.4",
     "@storybook/react": "^6.3.4",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "alpha",
     "@typescript-eslint/eslint-plugin": "^4.26.1",
     "astroturf": "^0.10.4",
     "babel-eslint": "^10.1.0",

test/CSSTransition-test.js

@@ -146,37 +146,48 @@ describe('CSSTransition', () => {
       );
     });
 
-    it('should lose the "*-appear-done" class after leaving and entering again', (done) => {
+    it('should lose the "*-appear-done" class after leaving and entering again', async () => {
       const nodeRef = React.createRef();
+      let handleEntered;
+      let onEntered = new Promise((resolve) => {
+        handleEntered = resolve;
+      });
+      let handleExited;
+      const onExited = new Promise((resolve) => {
+        handleExited = resolve;
+      });
       const { setProps } = render(
         <CSSTransition
           timeout={10}
           nodeRef={nodeRef}
           classNames="appear-test"
           in={true}
           appear={true}
-          onEntered={() => {
-            setProps({
-              in: false,
-              onEntered: () => {},
-              onExited: () => {
-                expect(nodeRef.current.className).toBe('appear-test-exit-done');
-                setProps({
-                  in: true,
-                  onEntered: () => {
-                    expect(nodeRef.current.className).toBe(
-                      'appear-test-enter-done'
-                    );
-                    done();
-                  },
-                });
-              },
-            });
-          }}
+          onEntered={handleEntered}
         >
           <div ref={nodeRef} />
         </CSSTransition>
       );
+
+      await onEntered;
+      setProps({
+        in: false,
+        onEntered: () => {},
+        onExited: handleExited,
+      });
+
+      await onExited;
+      expect(nodeRef.current.className).toBe('appear-test-exit-done');
+      onEntered = new Promise((resolve) => {
+        handleEntered = resolve;
+      });
+      setProps({
+        in: true,
+        onEntered: handleEntered,
+      });
+
+      await onEntered;
+      expect(nodeRef.current.className).toBe('appear-test-enter-done');
     });
 
     it('should not add undefined when appearDone is not defined', (done) => {

test/SwitchTransition-test.js

@@ -106,6 +106,9 @@ describe('SwitchTransition', () => {
     act(() => {
       jest.runAllTimers();
     });
+    act(() => {
+      jest.runAllTimers();
+    });
     expect(log).toEqual([
       'exit',
       'exiting',
@@ -137,6 +140,9 @@ describe('SwitchTransition', () => {
     act(() => {
       jest.runAllTimers();
     });
+    act(() => {
+      jest.runAllTimers();
+    });
     expect(log).toEqual([
       'enter',
       'entering',

test/Transition-test.js

@@ -449,25 +449,33 @@ describe('Transition', () => {
       setProps({ in: true });
     });
 
-    it('should stay mounted after exiting', (done) => {
+    it('should stay mounted after exiting', async () => {
+      let handleEntered;
+      const onEntered = new Promise((resolve) => {
+        handleEntered = resolve;
+      });
+      let handleExited;
+      const onExited = new Promise((resolve) => {
+        handleExited = resolve;
+      });
       const { container, setProps } = render(
         <MountTransition
           in={false}
-          onEntered={() => {
-            expect(container.textContent).toEqual(`status: ${ENTERED}`);
-
-            setProps({ in: false });
-          }}
-          onExited={() => {
-            expect(container.textContent).toEqual(`status: ${EXITED}`);
-
-            done();
-          }}
+          onEntered={handleEntered}
+          onExited={handleExited}
         />
       );
 
       expect(container.textContent).toEqual('');
       setProps({ in: true });
+
+      await onEntered;
+      expect(container.textContent).toEqual(`status: ${ENTERED}`);
+
+      setProps({ in: false });
+
+      await onExited;
+      expect(container.textContent).toEqual(`status: ${EXITED}`);
     });
   });
 

test/TransitionGroup-test.js

@@ -92,14 +92,14 @@ describe('TransitionGroup', () => {
     act(() => {
       jest.runAllTimers();
     });
-    expect(log).toEqual(['appear', 'appearing', 'appeared']);
+    expect(log).toEqual(['appear', 'appear', 'appearing', 'appeared']);
 
     log = [];
     renderStrict(<Parent count={2} />, container);
     act(() => {
       jest.runAllTimers();
     });
-    expect(log).toEqual(['enter', 'entering', 'entered']);
+    expect(log).toEqual(['enter', 'enter', 'entering', 'entered']);
 
     log = [];
     renderStrict(<Parent count={1} />, container);

yarn.lock

@@ -3503,10 +3503,10 @@
     resolve-from "^5.0.0"
     store2 "^2.12.0"
 
-"@testing-library/dom@^8.0.0":
-  version "8.11.1"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.11.1.tgz#03fa2684aa09ade589b460db46b4c7be9fc69753"
-  integrity sha512-3KQDyx9r0RKYailW2MiYrSSKEfH0GTkI51UGEvJenvcoDoeRYs0PZpi2SXqtnMClQvCqdtTTpOfFETDTVADpAg==
+"@testing-library/dom@^8.5.0":
+  version "8.11.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.11.2.tgz#fc110c665a066c2287be765e4a35ba8dad737015"
+  integrity sha512-idsS/cqbYudXcVWngc1PuWNmXs416oBy2g/7Q8QAUREt5Z3MUkAL2XJD7xazLJ6esDfqRDi/ZBxk+OPPXitHRw==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
@@ -3517,13 +3517,13 @@
     lz-string "^1.4.4"
     pretty-format "^27.0.2"
 
-"@testing-library/react@^12.1.2":
-  version "12.1.2"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.2.tgz#f1bc9a45943461fa2a598bb4597df1ae044cfc76"
-  integrity sha512-ihQiEOklNyHIpo2Y8FREkyD1QAea054U0MVbwH1m8N9TxeFz+KoJ9LkqoKqJlzx2JDm56DVwaJ1r36JYxZM05g==
+"@testing-library/react@alpha":
+  version "13.0.0-alpha.5"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-13.0.0-alpha.5.tgz#29bfc36b550e2a1025cbebf7254d5a0a46cb58c5"
+  integrity sha512-QrxKC/7pTE0ze3wLZNaenGJqsLcbAJL71XqU/ryJTL2pqZBjiJHuxZavl2ZQAxnBQkDQF9oh9my3bKPstWfnhA==
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^8.0.0"
+    "@testing-library/dom" "^8.5.0"
 
 "@tootallnate/once@1":
   version "1.0.0"