Test with 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",
@@ -99,8 +99,8 @@
     "jest": "^25.3.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.3.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "beta",
+    "react-dom": "beta",
     "release-script": "^1.0.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.6.1",

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,7 +3503,7 @@
     resolve-from "^5.0.0"
     store2 "^2.12.0"
 
-"@testing-library/dom@^8.0.0":
+"@testing-library/dom@^8.5.0":
   version "8.11.1"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.11.1.tgz#03fa2684aa09ade589b460db46b4c7be9fc69753"
   integrity sha512-3KQDyx9r0RKYailW2MiYrSSKEfH0GTkI51UGEvJenvcoDoeRYs0PZpi2SXqtnMClQvCqdtTTpOfFETDTVADpAg==
@@ -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.4"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-13.0.0-alpha.4.tgz#00cf104f3a9b90d07691497abc50ade74e534d98"
+  integrity sha512-SY+sz4juZDcMlAaEI8kYpdi4qv+fGjvqLHETVAcL13Q+N9PFtsdmNJnVu3Ez4V1dJuR59y4vZlSJa/U69YyYBg==
   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"
@@ -14398,14 +14398,14 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@^17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
-  integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
+react-dom@beta:
+  version "18.0.0-beta-149b420f6-20211119"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0-beta-149b420f6-20211119.tgz#dcf05faf52c6206db642dd50ae13a6647ee39fac"
+  integrity sha512-r8olPiJVDGRLHjF+LMzLBPUWSbG6OXuNInaC/kcJkDwBW8rX2gkOypGvylP5i3VqtpiPX6CHyD599aypa3wpPA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    scheduler "^0.20.1"
+    scheduler "0.21.0-beta-149b420f6-20211119"
 
 react-draggable@^4.4.3:
   version "4.4.3"
@@ -14522,10 +14522,10 @@ react-textarea-autosize@^8.3.0:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
-react@^17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
-  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
+react@beta:
+  version "18.0.0-beta-149b420f6-20211119"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0-beta-149b420f6-20211119.tgz#4acc03dddb74a93aec83a8d6aadeb6b503061f4b"
+  integrity sha512-cxLRM4Yqhe5fYAeYyMEGphtDnSJmKrvrsQyXskcVViGN/EmONHbFfwt1lRUCiZyXX44+/NOgIJ1OjGX2rHmpdQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -15301,10 +15301,10 @@ saxes@^3.1.9:
   dependencies:
     xmlchars "^2.1.1"
 
-scheduler@^0.20.1:
-  version "0.20.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
-  integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==
+scheduler@0.21.0-beta-149b420f6-20211119:
+  version "0.21.0-beta-149b420f6-20211119"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0-beta-149b420f6-20211119.tgz#066b24dc2df762a6197c725930dcc7013de40ad2"
+  integrity sha512-IShAO9AhLkyiHY5wujThaUypxGHJj8IBdTTlerl040NzV/edrGeFTeTEpn4EjEhQzV0hVW9Oo58Fps3p5wtnww==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"