React useRef测试环境为null浏览器正常，如何解决？

这不是预期情况，正常测试流程中组件渲染完成后ref应该被正确赋值。出现这个问题通常和测试时机、MUI组件的ref传递逻辑或测试写法有关，以下是具体解决思路：

1. 确保测试等待组件完全渲染 #

Testing Library的渲染是异步的，若在组件未完成渲染时访问ref，就会拿到null。可以用waitFor或findBy系列查询等待组件就绪：

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

test('handleSearchFilter能正确获取选中值', async () => {
  const { getByRole } = render(<YourComponent />);
  // 等待RadioGroup元素渲染完成
  await waitFor(() => getByRole('radiogroup'));
  
  // 此时组件内的rgRef应该已被赋值
  // 若需要直接访问组件内部的ref，可配合renderHook（自定义hook场景）或通过组件实例（类组件），函数组件需暴露ref或相关方法
});

2. 检查MUI RadioGroup的ref传递 #

MUI的RadioGroup是封装组件，直接传递ref可能不会直接指向底层HTMLDivElement（部分封装组件需通过forwardRef转发ref）。可以改用回调ref确保赋值：

// 组件内修改ref赋值方式
const rgRef = useRef<HTMLDivElement>(null);
// ...
<RadioGroup
  row
  ref={(node) => {
    rgRef.current = node as HTMLDivElement;
  }}
  // 其他属性
/>

3. 手动Mock ref（应急方案） #

如果必须在测试中强制赋值ref，可以通过mockuseRef来注入自定义的DOM元素：

import React from 'react';
import { render } from '@testing-library/react';
import YourComponent from './YourComponent';

test('mock ref后测试handleSearchFilter', () => {
  // 创建模拟的DOM元素
  const mockRadioGroup = document.createElement('div');
  // 添加模拟的checked input
  const mockInput = document.createElement('input');
  mockInput.type = 'radio';
  mockInput.checked = true;
  mockInput.value = 'test-value';
  mockRadioGroup.appendChild(mockInput);
  
  // mock useRef返回自定义ref
  const mockRef = { current: mockRadioGroup };
  jest.spyOn(React, 'useRef').mockReturnValue(mockRef);
  
  const { result } = render(<YourComponent />);
  const searchResult = result.current.handleSearchFilter('test-search');
  
  expect(searchResult).toEqual({ 'test-value': 'test-search' });
  
  // 测试结束后恢复useRef
  jest.restoreAllMocks();
});

4. 重构代码（推荐方案） #

Testing Library提倡测试用户行为而非内部实现，直接操作ref属于内部细节依赖。可以重构代码，用state跟踪选中的Radio值，避免依赖DOM查询：

// 组件内修改为通过state跟踪选中值
const [selectedValue, setSelectedValue] = useState<string>(filterOptions[0].value);

const handleSearchFilter = useCallback(
  (searchValue: string) => {
    return selectedValue ? { [selectedValue]: searchValue } : {};
  },
  [selectedValue]
);

// RadioGroup通过onChange更新state
<RadioGroup
  row
  value={selectedValue}
  onChange={(e) => setSelectedValue(e.target.value)}
  // 其他属性
/>

测试时只需模拟用户选择Radio，再验证handleSearchFilter的返回值即可，完全不需要依赖ref：

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import YourComponent from './YourComponent';

test('用户选择Radio后搜索逻辑正确', async () => {
  const user = userEvent.setup();
  render(<YourComponent />);
  
  // 模拟用户选择第二个Radio
  const secondRadio = await screen.findByLabelText('第二个选项');
  await user.click(secondRadio);
  
  // 获取组件的handleSearchFilter方法（需暴露给测试，比如通过renderHook或组件props）
  const searchResult = handleSearchFilter('test');
  expect(searchResult).toEqual({ 'second-value': 'test' });
});

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