test: Add React 18 to test matrix (#771)

* Adjust tests for React 18

* Wrap all updates in act()

* Run with next in CI

* Branch tests for React < 18 and 18

* Don't block releases when React 18 fails (yet)

* double onEnter is due to StrictEffects

* Apply suggestions from code review

Co-authored-by: Toru Kobayashi <[email protected]>

Co-authored-by: Toru Kobayashi <[email protected]>

Author: eps1lon

.github/workflows/ci.yml

@@ -14,8 +14,9 @@ jobs:
       # Otherwise how would we know if a specific React version caused the failure?
       fail-fast: false
       matrix:
-        REACT_DIST: [16, 17]
-
+        REACT_DIST: [16, 17, next]
+    # Unstable release channel so let's not block a potential release of `react-transition-group`
+    continue-on-error: ${{ matrix.REACT_DIST == 'next' }}
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 14

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from './utils';
+import { render, waitFor } from './utils';
 
 import CSSTransition from '../src/CSSTransition';
 import TransitionGroup from '../src/TransitionGroup';
@@ -36,8 +36,9 @@ describe('CSSTransition', () => {
   });
 
   describe('entering', () => {
-    it('should apply classes at each transition state', (done) => {
+    it('should apply classes at each transition state', async () => {
       let count = 0;
+      let done = false;
       const nodeRef = React.createRef();
       const { setProps } = render(
         <CSSTransition nodeRef={nodeRef} timeout={10} classNames="test">
@@ -63,12 +64,16 @@ describe('CSSTransition', () => {
         onEntered() {
           expect(nodeRef.current.className).toEqual('test-enter-done');
           expect(count).toEqual(2);
-          done();
+          done = true;
         },
       });
+
+      await waitFor(() => {
+        expect(done).toBe(true);
+      });
     });
 
-    it('should apply custom classNames names', (done) => {
+    it('should apply custom classNames names', async () => {
       let count = 0;
       const nodeRef = React.createRef();
       const { setProps } = render(
@@ -102,15 +107,17 @@ describe('CSSTransition', () => {
 
         onEntered() {
           expect(nodeRef.current.className).toEqual('custom-super-done');
-          expect(count).toEqual(2);
-          done();
         },
       });
+
+      await waitFor(() => {
+        expect(count).toEqual(2);
+      });
     });
   });
 
   describe('appearing', () => {
-    it('should apply appear classes at each transition state', (done) => {
+    it('should apply appear classes at each transition state', async () => {
       let count = 0;
       const nodeRef = React.createRef();
       render(
@@ -137,17 +144,21 @@ describe('CSSTransition', () => {
             expect(nodeRef.current.className).toEqual(
               'appear-test-appear-done appear-test-enter-done'
             );
-            expect(count).toEqual(2);
-            done();
           }}
         >
           <div ref={nodeRef} />
         </CSSTransition>
       );
+
+      await waitFor(() => {
+        expect(count).toEqual(2);
+      });
     });
 
-    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 entered = false;
+      let exited = false;
       const { setProps } = render(
         <CSSTransition
           timeout={10}
@@ -156,31 +167,45 @@ describe('CSSTransition', () => {
           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();
-                  },
-                });
-              },
-            });
+            entered = true;
           }}
         >
           <div ref={nodeRef} />
         </CSSTransition>
       );
+
+      await waitFor(() => {
+        expect(entered).toEqual(true);
+      });
+      setProps({
+        in: false,
+        onEntered: () => {},
+        onExited: () => {
+          exited = true;
+        },
+      });
+
+      await waitFor(() => {
+        expect(exited).toEqual(true);
+      });
+      expect(nodeRef.current.className).toBe('appear-test-exit-done');
+      entered = false;
+      setProps({
+        in: true,
+        onEntered: () => {
+          entered = true;
+        },
+      });
+
+      await waitFor(() => {
+        expect(entered).toEqual(true);
+      });
+      expect(nodeRef.current.className).toBe('appear-test-enter-done');
     });
 
-    it('should not add undefined when appearDone is not defined', (done) => {
+    it('should not add undefined when appearDone is not defined', async () => {
       const nodeRef = React.createRef();
+      let done = false;
       render(
         <CSSTransition
           timeout={10}
@@ -195,15 +220,19 @@ describe('CSSTransition', () => {
           onEntered={(isAppearing) => {
             expect(isAppearing).toEqual(true);
             expect(nodeRef.current.className).toEqual('');
-            done();
+            done = true;
           }}
         >
           <div ref={nodeRef} />
         </CSSTransition>
       );
+
+      await waitFor(() => {
+        expect(done).toEqual(true);
+      });
     });
 
-    it('should not be appearing in normal enter mode', (done) => {
+    it('should not be appearing in normal enter mode', async () => {
       let count = 0;
       const nodeRef = React.createRef();
       render(
@@ -237,10 +266,12 @@ describe('CSSTransition', () => {
           expect(nodeRef.current.className).toEqual(
             'not-appear-test-enter-done'
           );
-          expect(count).toEqual(2);
-          done();
         },
       });
+
+      await waitFor(() => {
+        expect(count).toEqual(2);
+      });
     });
 
     it('should not enter the transition states when appear=false', () => {
@@ -269,7 +300,7 @@ describe('CSSTransition', () => {
   });
 
   describe('exiting', () => {
-    it('should apply classes at each transition state', (done) => {
+    it('should apply classes at each transition state', async () => {
       let count = 0;
       const nodeRef = React.createRef();
       const { setProps } = render(
@@ -295,13 +326,15 @@ describe('CSSTransition', () => {
 
         onExited() {
           expect(nodeRef.current.className).toEqual('test-exit-done');
-          expect(count).toEqual(2);
-          done();
         },
       });
+
+      await waitFor(() => {
+        expect(count).toEqual(2);
+      });
     });
 
-    it('should apply custom classNames names', (done) => {
+    it('should apply custom classNames names', async () => {
       let count = 0;
       const nodeRef = React.createRef();
       const { setProps } = render(
@@ -336,13 +369,15 @@ describe('CSSTransition', () => {
 
         onExited() {
           expect(nodeRef.current.className).toEqual('custom-super-done');
-          expect(count).toEqual(2);
-          done();
         },
       });
+
+      await waitFor(() => {
+        expect(count).toEqual(2);
+      });
     });
 
-    it('should support empty prefix', (done) => {
+    it('should support empty prefix', async () => {
       let count = 0;
 
       const nodeRef = React.createRef();
@@ -367,10 +402,12 @@ describe('CSSTransition', () => {
 
         onExited() {
           expect(nodeRef.current.className).toEqual('exit-done');
-          expect(count).toEqual(2);
-          done();
         },
       });
+
+      await waitFor(() => {
+        expect(count).toEqual(2);
+      });
     });
   });
 
@@ -412,20 +449,7 @@ describe('CSSTransition', () => {
         <Test direction="down" text="foo" nodeRef={nodeRef.foo} />
       );
 
-      const rerender = (getProps) =>
-        new Promise((resolve) =>
-          setProps({
-            onEnter: undefined,
-            onEntering: undefined,
-            onEntered: undefined,
-            onExit: undefined,
-            onExiting: undefined,
-            onExited: undefined,
-            ...getProps(resolve),
-          })
-        );
-
-      await rerender((resolve) => ({
+      setProps({
         direction: 'up',
         text: 'bar',
         nodeRef: nodeRef.bar,
@@ -439,11 +463,14 @@ describe('CSSTransition', () => {
           expect(nodeRef.bar.current.className).toEqual(
             'up-enter up-enter-active'
           );
-          resolve();
         },
-      }));
+      });
+
+      await waitFor(() => {
+        expect(count).toEqual(2);
+      });
 
-      await rerender((resolve) => ({
+      setProps({
         direction: 'down',
         text: 'foo',
         nodeRef: nodeRef.foo,
@@ -457,11 +484,12 @@ describe('CSSTransition', () => {
         onEntered() {
           count++;
           expect(nodeRef.foo.current.className).toEqual('down-enter-done');
-          resolve();
         },
-      }));
+      });
 
-      expect(count).toEqual(4);
+      await waitFor(() => {
+        expect(count).toEqual(4);
+      });
     });
   });
 });

test/CSSTransitionGroup-test.js

@@ -218,7 +218,9 @@ describe('CSSTransitionGroup', () => {
     ReactDOM.unmountComponentAtNode(container);
 
     // Testing that no exception is thrown here, as the timeout has been cleared.
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
   });
 
   it('should handle unmounted elements properly', () => {

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',