From 2695bfaca471f187abe2464621509d0b09e64b9f Mon Sep 17 00:00:00 2001
From: illiteratewriter <manukoshyabraham@gmail.com>
Date: Fri, 3 Mar 2023 00:44:02 +0530
Subject: [PATCH] fix(#1289): prevent error in Strict Mode (#2672)

* fix(#1289): prevent error in Strict Mode

- remove findDomNode error which was thrown for components using
Fade.js file in ReactStrict mode

* fix: rule of hooks
---
 src/Fade.js                 |  8 +++---
 src/__tests__/Alert.spec.js | 50 ++++++++++++-------------------------
 src/__tests__/Modal.spec.js | 10 ++++++++
 3 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/src/Fade.js b/src/Fade.js
index bd6574a30..8d1dc04c8 100644
--- a/src/Fade.js
+++ b/src/Fade.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Transition } from 'react-transition-group';
@@ -42,6 +42,8 @@ const defaultProps = {
 };
 
 function Fade(props) {
+  const ref = useRef(null);
+
   const {
     tag: Tag,
     baseClass,
@@ -49,7 +51,7 @@ function Fade(props) {
     className,
     cssModule,
     children,
-    innerRef,
+    innerRef = ref,
     ...otherProps
   } = props;
 
@@ -57,7 +59,7 @@ function Fade(props) {
   const childProps = omit(otherProps, TransitionPropTypeKeys);
 
   return (
-    <Transition {...transitionProps}>
+    <Transition nodeRef={innerRef} {...transitionProps}>
       {(status) => {
         const isActive = status === 'entered';
         const classes = mapToCssModules(
diff --git a/src/__tests__/Alert.spec.js b/src/__tests__/Alert.spec.js
index a253f74bc..d0fa09e04 100644
--- a/src/__tests__/Alert.spec.js
+++ b/src/__tests__/Alert.spec.js
@@ -8,6 +8,7 @@ import { Alert } from '..';
 describe('Alert', () => {
   beforeEach(() => {
     jest.resetModules();
+    jest.useFakeTimers();
   });
 
   it('should render children', () => {
@@ -104,36 +105,15 @@ describe('Alert', () => {
   });
 
   it('should have default transitionTimeouts', () => {
-    jest.doMock('react-transition-group', () => ({
-      Transition: jest.fn(() => null),
-    }));
-    // eslint-disable-next-line global-require
-    const { Transition } = require('react-transition-group');
-    // eslint-disable-next-line global-require
-    const { Alert } = require('..');
+    render(<Alert>Hello</Alert>);
 
-    render(<Alert>Yo!</Alert>);
+    expect(screen.getByText(/hello/i)).not.toHaveClass('show');
 
-    expect(Transition).toHaveBeenCalledWith(
-      expect.objectContaining({
-        timeout: 150,
-        appear: true,
-        enter: true,
-        exit: true,
-      }),
-      {},
-    );
+    jest.advanceTimersByTime(150);
+    expect(screen.getByText(/hello/i)).toHaveClass('show');
   });
 
   it('should have support configurable transitionTimeouts', () => {
-    jest.doMock('react-transition-group', () => ({
-      Transition: jest.fn(() => null),
-    }));
-    // eslint-disable-next-line global-require
-    const { Transition } = require('react-transition-group');
-    // eslint-disable-next-line global-require
-    const { Alert } = require('..');
-
     render(
       <Alert
         transition={{
@@ -143,18 +123,20 @@ describe('Alert', () => {
           exit: false,
         }}
       >
-        Yo!
+        Hello
       </Alert>,
     );
 
-    expect(Transition).toHaveBeenCalledWith(
-      expect.objectContaining({
-        timeout: 0,
-        appear: false,
-        enter: false,
-        exit: false,
-      }),
-      {},
+    expect(screen.getByText(/hello/i)).toHaveClass('show');
+  });
+
+  it('works with strict mode', () => {
+    const spy = jest.spyOn(console, 'error');
+    render(
+      <React.StrictMode>
+        <Alert>Hello</Alert>
+      </React.StrictMode>,
     );
+    expect(spy).not.toHaveBeenCalled();
   });
 });
diff --git a/src/__tests__/Modal.spec.js b/src/__tests__/Modal.spec.js
index 808d13777..25ca3d4e1 100644
--- a/src/__tests__/Modal.spec.js
+++ b/src/__tests__/Modal.spec.js
@@ -1105,4 +1105,14 @@ describe('Modal', () => {
     user.tab();
     expect(screen.getByText(/click 1/i)).toHaveFocus();
   });
+
+  it('works with strict mode', () => {
+    const spy = jest.spyOn(console, 'error');
+    render(
+      <React.StrictMode>
+        <Modal isOpen>Hello</Modal>
+      </React.StrictMode>,
+    );
+    expect(spy).not.toHaveBeenCalled();
+  });
 });