React测试：如何测试useRef、useImperativeHandle及validateInputs调用

我正在开发一款React企业级应用，涉及两个存在父子关系的组件。子组件中的validateInputs函数需由父组件调用，我已通过forwardRef方法和useImperativeHandle Hook实现该功能，代码运行正常，但卡在测试环节。我想了解如何测试该Hook，以及验证Hook内的validateInputs函数是否被调用。

注：我无法在父组件中创建函数并通过props传递给子组件，因此必须采用当前方案。

组件关系示例 #

父组件代码：

function Parent() {
    const childRef = useRef(null);
    
    const handleClick = () => {
      childRef?.current?.validateInputs();
    }

    return (
     <div>
       <button onClick={handleClick}>Click</button>
       <Child ref={childRef} />
     </div> 
    )
}

子组件代码：

const Child = forwardRef((props, ref) => {
    
    useImperativeHandle(ref, () => ({
      validateInputs() {
       // 验证逻辑代码
      }
    }))

    return <div>jsx</div> 
})

当前测试代码 #

it('#validate should call on button click', () => {
  const {getByText} = render(<Parent/>);
  const btn = getByText('Click');
  const fn = jest.spyOn(React, "useImperativeHandle")
  fireEvent.click(btn);
  waitFor(() => expect(fn).toHaveBeenCalled());
})

1. 核心思路：测试行为而非内部实现 #

不要去监听React内置的useImperativeHandle Hook，这种测试属于关注内部实现，会让测试变得脆弱。正确的做法是验证点击按钮后，子组件的validateInputs方法是否被调用这个行为。

2. 具体实现方案 #

方案一：Mock子组件暴露的方法 #

直接给子组件的validateInputs方法创建一个mock函数，验证它是否被触发：

import { render, fireEvent, waitFor } from '@testing-library/react';
import Parent from './Parent';
import Child from './Child';

it('点击按钮应调用子组件的validateInputs方法', async () => {
  // 创建mock函数替代子组件的验证方法
  const mockValidate = jest.fn();

  // Mock整个子组件，让它暴露我们的mock函数
  jest.mock('./Child', () => {
    return jest.fn((props, ref) => {
      React.useImperativeHandle(ref, () => ({
        validateInputs: mockValidate
      }));
      return <div>jsx</div>;
    });
  });

  const { getByText } = render(<Parent />);
  const button = getByText('Click');

  // 触发点击事件
  fireEvent.click(button);

  // 验证mock函数被调用
  await waitFor(() => {
    expect(mockValidate).toHaveBeenCalledTimes(1);
  });

  // 清理mock，避免影响其他测试
  jest.restoreAllMocks();
});

方案二：直接获取子组件的ref实例 #

如果不想mock整个子组件，可以通过外部传入ref的方式捕获子组件实例，再监听其方法：

import { render, fireEvent, waitFor } from '@testing-library/react';
import Parent from './Parent';
import React from 'react';

// 先给Parent组件添加支持外部传入ref的逻辑（可选，更灵活）
function Parent({ childRef }) {
  const internalRef = childRef || useRef(null);
  
  const handleClick = () => {
    internalRef?.current?.validateInputs();
  }

  return (
   <div>
     <button onClick={handleClick}>Click</button>
     <Child ref={internalRef} />
   </div> 
  )
}

// 测试代码
it('点击按钮应调用子组件的validateInputs方法', async () => {
  const childRef = React.createRef();
  
  const { getByText } = render(<Parent childRef={childRef} />);
  
  // 确保子组件挂载完成，ref已赋值
  await waitFor(() => expect(childRef.current).not.toBeNull());

  // 监听子组件的validateInputs方法
  const validateSpy = jest.spyOn(childRef.current, 'validateInputs');

  const button = getByText('Click');
  fireEvent.click(button);

  // 验证方法被调用
  await waitFor(() => {
    expect(validateSpy).toHaveBeenCalled();
  });

  // 清理spy
  validateSpy.mockRestore();
});

方案三：验证方法执行的副作用 #

如果validateInputs有实际业务逻辑（比如验证表单、显示错误提示），也可以通过验证这些副作用来确认方法被调用：

it('点击按钮应触发表单验证并显示错误', async () => {
  const { getByText, getByTestId } = render(<Parent />);
  const button = getByText('Click');

  fireEvent.click(button);

  // 验证错误提示是否出现（假设子组件验证失败会显示id为"error-tip"的元素）
  await waitFor(() => {
    expect(getByTestId('error-tip')).toBeInTheDocument();
  });
});

内容的提问来源于stack exchange，提问作者Pradhyumn Sharma