fix: fix Badge CSSMotion setref use error and add test case (#48878)

ant-design · May 11, 2024 · 470e8a8 · 470e8a8
1 parent c656603
commit 470e8a8
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/components/badge/__tests__/index.test.tsx b/components/badge/__tests__/index.test.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { act, fireEvent, render } from '@testing-library/react';
 
 import type { GetRef } from '../../_util/type';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import Tooltip from '../../tooltip';
 import Badge from '../index';
 
@@ -26,19 +26,31 @@ describe('Badge', () => {
     jest.useRealTimers();
   });
 
-  it('no strict warning', () => {
+  it('no strict warning', async () => {
     const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    const { rerender } = render(
-      <Badge dot>
-        <span />
-      </Badge>,
-    );
-
-    rerender(
-      <Badge>
-        <span />
-      </Badge>,
-    );
+    const Comp = () => {
+      const [count, setCount] = React.useState<number | null>(9999);
+
+      return (
+        <>
+          <Badge count={count}>
+            <span>Badge</span>
+          </Badge>
+
+          <br />
+          <br />
+          <br />
+
+          <button type="button" onClick={() => setCount(null)}>
+            click
+          </button>
+        </>
+      );
+    };
+    const { container } = render(<Comp />);
+
+    fireEvent.click(container.querySelector('button')!);
+    await waitFakeTimer();
 
     expect(errSpy).not.toHaveBeenCalled();
     errSpy.mockRestore();

diff --git a/components/badge/index.tsx b/components/badge/index.tsx
@@ -216,7 +216,7 @@ const InternalBadge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref)
         motionAppear={false}
         motionDeadline={1000}
       >
-        {({ className: motionClassName, ref: scrollNumberRef }) => {
+        {({ className: motionClassName }) => {
           const scrollNumberPrefixCls = getPrefixCls(
             'scroll-number',
             customizeScrollNumberPrefixCls,
@@ -255,7 +255,6 @@ const InternalBadge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref)
               title={titleNode}
               style={scrollNumberStyle}
               key="scrollNumber"
-              ref={scrollNumberRef}
             >
               {displayNode}
             </ScrollNumber>