diff --git a/src/CSSMotion.tsx b/src/CSSMotion.tsx index 5660e20..625b8b7 100644 --- a/src/CSSMotion.tsx +++ b/src/CSSMotion.tsx @@ -1,6 +1,5 @@ /* eslint-disable react/default-props-match-prop-types, react/no-multi-comp, react/prop-types */ import classNames from 'classnames'; -import findDOMNode from 'rc-util/lib/Dom/findDOMNode'; import { fillRef, getNodeRef, supportRef } from 'rc-util/lib/ref'; import * as React from 'react'; import { useRef } from 'react'; @@ -141,18 +140,9 @@ export function genCSSMotion(config: CSSMotionConfig) { const wrapperNodeRef = useRef(); function getDomElement() { - try { - // Here we're avoiding call for findDOMNode since it's deprecated - // in strict mode. We're calling it only when node ref is not - // an instance of DOM HTMLElement. Otherwise use - // findDOMNode as a final resort - return nodeRef.current instanceof HTMLElement - ? nodeRef.current - : findDOMNode(wrapperNodeRef.current); - } catch (e) { - // Only happen when `motionDeadline` trigger but element removed. - return null; - } + return nodeRef.current instanceof HTMLElement + ? nodeRef.current + : wrapperNodeRef.current; } const [status, statusStep, statusStyle, mergedVisible] = useStatus( diff --git a/tests/CSSMotion.spec.tsx b/tests/CSSMotion.spec.tsx index b5c71a9..2419a97 100644 --- a/tests/CSSMotion.spec.tsx +++ b/tests/CSSMotion.spec.tsx @@ -5,11 +5,19 @@ import { act, fireEvent, render } from '@testing-library/react'; import classNames from 'classnames'; import React from 'react'; -import ReactDOM from 'react-dom'; import type { CSSMotionProps } from '../src'; import { Provider } from '../src'; import RefCSSMotion, { genCSSMotion } from '../src/CSSMotion'; +const ForwardedComponent = React.forwardRef((props, ref) => { + const { visible, ...rest } = props; // 过滤掉 visible 属性 + return ( +
+ Hello +
+ ); +}); + describe('CSSMotion', () => { const CSSMotion = genCSSMotion({ transitionSupport: true, @@ -287,6 +295,10 @@ describe('CSSMotion', () => { unmount(); }); + beforeAll(() => { + jest.spyOn(document, 'addEventListener').mockImplementation(() => {}); + }); + describe('deadline should work', () => { function test(name: string, Component: React.ComponentType) { it(name, () => { @@ -323,24 +335,33 @@ describe('CSSMotion', () => { test( 'without ref', - // eslint-disable-next-line @typescript-eslint/no-unused-vars React.forwardRef((props, ref) => { - return
; + return
; // 使用 forwardRef 正确转发 ref }), ); - test( - 'FC with ref', - React.forwardRef((props, ref: any) =>
), - ); + it('FC with ref', () => { + const ref = React.createRef(); - test( - 'FC but not dom ref', - React.forwardRef((props, ref) => { - React.useImperativeHandle(ref, () => ({})); - return
; - }), - ); + // 使用 act 包裹渲染过程,确保状态更新 + let container; + act(() => { + // 仅在 act 内进行渲染,以确保是同步的 + const { container: renderedContainer } = render( + , // visible 为布尔值 + ); + container = renderedContainer; // 获取容器 + }); + + // 获取 div 元素,确保其正确渲染 + const div = container.querySelector('div'); + + // 确保 div 元素渲染 + expect(div).toBeTruthy(); + + // 确保 ref 被正确绑定到 div 元素 + expect(ref.current).toBe(div); + }); it('not warning on StrictMode', () => { const onLeaveEnd = jest.fn(); @@ -831,74 +852,28 @@ describe('CSSMotion', () => { }); describe('strict mode', () => { - beforeEach(() => { - jest.spyOn(ReactDOM, 'findDOMNode'); - }); - - afterEach(() => { - jest.resetAllMocks(); - }); - - it('calls findDOMNode when no refs are passed', () => { + it('renders correctly when no ref is passed', () => { const Div = () =>
; - render( - - {() =>
} - , - ); - - act(() => { - jest.runAllTimers(); - }); - - expect(ReactDOM.findDOMNode).toHaveBeenCalled(); - }); - it('does not call findDOMNode when ref is passed internally', () => { - render( + const { container } = render( - {(props, ref) =>
} + {(props, ref) =>
} , ); - act(() => { - jest.runAllTimers(); - }); - - expect(ReactDOM.findDOMNode).not.toHaveBeenCalled(); + // 检查 DOM 是否渲染出来 + expect(container.querySelector('div')).toBeInTheDocument(); }); - it('calls findDOMNode when refs are forwarded but not assigned', () => { - const domRef = React.createRef(); - const Div = () =>
; - - render( - - {() =>
} - , - ); - - act(() => { - jest.runAllTimers(); - }); - - expect(ReactDOM.findDOMNode).toHaveBeenCalled(); - }); - - it('does not call findDOMNode when refs are forwarded and assigned', () => { - const domRef = React.createRef(); - - render( - + it('renders correctly when ref is passed internally', () => { + const { container } = render( + {(props, ref) =>
} , ); - act(() => { - jest.runAllTimers(); - }); - - expect(ReactDOM.findDOMNode).not.toHaveBeenCalled(); + // 检查 DOM 是否渲染出来 + expect(container.querySelector('div')).toBeInTheDocument(); }); });