使用forwardRef的React组件测试时`ref`非prop警告如何消除？

问题原因 #

这个警告并非Testing Library不兼容forwardRef，而是由以下常见情况导致：

1. 组件内部错误地从props中解构/访问ref（ref是forwardRef的第二个独立参数，不属于props范畴）
2. 测试中不必要地手动传递ref（不符合Testing Library的最佳实践）

解决方案 #

方案1：修正组件定义，正确处理forwardRef #

确保组件中不从props里获取ref，将ref作为第二个独立参数接收并转发给内部元素：

import React, { forwardRef } from 'react';

const Checkbox = forwardRef((props, ref) => {
  // 仅解构props中的非ref属性
  const { label, ...inputProps } = props;
  
  return (
    <div>
      <input
        ref={ref}
        type="checkbox"
        {...inputProps}
      />
      <label>{label}</label>
    </div>
  );
});

// 可选：设置displayName，方便调试
Checkbox.displayName = 'Checkbox';

export default Checkbox;

方案2：遵循Testing Library最佳实践，避免手动传ref #

Testing Library推荐通过角色、标签文本等语义化方式获取DOM元素，而非手动管理ref，这样既符合测试逻辑，也能直接消除警告：

import { render, screen } from '@testing-library/react';
import Checkbox from './Checkbox';

test('Checkbox渲染正常', () => {
  render(<Checkbox name="test" label="Checkbox label" />);
  
  // 通过标签文本获取checkbox元素
  const checkbox = screen.getByLabelText('Checkbox label');
  
  // 执行断言
  expect(checkbox).toBeInTheDocument();
  expect(checkbox).toHaveAttribute('name', 'test');
});

方案3：确需访问ref时的正确写法 #

如果必须在测试中获取组件转发的ref（比如验证DOM元素属性），确保组件正确转发ref的前提下，使用createRef/useRef即可，此时警告应该自动消失：

import { render } from '@testing-library/react';
import React, { createRef } from 'react';
import Checkbox from './Checkbox';

test('能正确获取checkbox的ref', () => {
  const checkboxRef = createRef();
  
  render(
    <Checkbox 
      name="test" 
      label="Checkbox label" 
      ref={checkboxRef} 
    />
  );
  
  // 验证ref指向input元素
  expect(checkboxRef.current).toBeInstanceOf(HTMLInputElement);
  expect(checkboxRef.current).toHaveAttribute('name', 'test');
});

方案4：过滤警告（最后手段） #

如果以上方案都无法解决（比如依赖库导致的假警告），可以在测试配置中过滤该警告：
在src/setupTests.js（或Jest配置的setup文件）中添加：

const originalError = console.error;

beforeAll(() => {
  console.error = (...args) => {
    // 过滤ref相关的警告
    if (/`ref` is not a prop/.test(args[0])) return;
    originalError.call(console, ...args);
  };
});

afterAll(() => {
  console.error = originalError;
});

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