Jest与react-testing-library单元测试中useRef引用为null的问题排查及解决方案咨询

这个报错的核心原因是你使用的react-test-renderer并没有将组件渲染到真实的DOM环境中——它生成的是虚拟的JSON树，而非可交互的DOM节点，因此navRef.current始终是null，调用contains方法自然会抛出错误。下面提供两种可行的解决方案，优先推荐第一种，更符合现代React测试的最佳实践：

方案一：改用@testing-library/react进行测试 #

@testing-library/react会将组件渲染到jsdom（模拟浏览器DOM环境）中，能正确处理useRef对真实DOM节点的引用，完美适配你的组件逻辑。

步骤1：给组件添加测试标识 #

首先在Header组件中，给菜单触发按钮和菜单容器添加data-testid，方便测试时定位元素：

import { useState, useEffect, useRef } from 'react';
const Header = () => {
  const [menuOpen, setMenuOpen] = useState(false);
  const navRef = useRef(null);
  const hideMenu = () => setMenuOpen(false);
  const handleClick = event => {
    if (menuOpen && !navRef.current.contains(event.target)) {
      hideMenu();
    }
  };
  useEffect(() => {
    document.addEventListener('click', handleClick);
    return () => {
      document.removeEventListener('click', handleClick);
    };
  });

  return (
    <header className="header">
      <nav className="header-nav" ref={navRef}>
        {/* 添加菜单触发按钮的测试标识 */}
        <button 
          data-testid="menu-toggle"
          onClick={() => setMenuOpen(!menuOpen)}
        >
          切换菜单
        </button>
        {/* 添加菜单容器的测试标识 */}
        {menuOpen && (
          <div data-testid="mobile-menu" className="mobile-menu">
            菜单内容
          </div>
        )}
      </nav>
    </header>
  );
};
export default Header;

步骤2：重写测试代码 #

使用@testing-library/react的API来编写测试，模拟真实用户的操作流程：

import React from 'react';
import '@testing-library/jest-dom';
import { render, fireEvent, screen } from '@testing-library/react';
import Header from './Header';

afterEach(() => {
  jest.clearAllMocks();
});

describe('Header Component', () => {
  test('closes mobile menu when clicking outside the nav', () => {
    // 渲染组件到jsdom环境
    render(<Header />);

    // 找到菜单触发按钮并点击，打开菜单
    const menuToggle = screen.getByTestId('menu-toggle');
    fireEvent.click(menuToggle);
    // 验证菜单已打开
    expect(screen.getByTestId('mobile-menu')).toBeInTheDocument();

    // 点击nav外部区域（比如document.body）
    fireEvent.click(document.body);

    // 验证菜单已关闭
    expect(screen.queryByTestId('mobile-menu')).not.toBeInTheDocument();
  });
});

这个方案的优势在于：

• 完全模拟真实用户的交互行为，测试结果更可靠
• 自动处理DOM环境，navRef.current会正确指向真实的<nav>节点，contains方法能正常调用
• 符合React测试的最佳实践，可读性和维护性更强

方案二：在react-test-renderer中手动模拟ref（不推荐） #

如果你坚持使用react-test-renderer，可以手动创建一个模拟的DOM节点，并赋值给navRef.current，但这种方式比较繁琐，且脱离真实DOM环境：

import React from 'react';
import '@testing-library/jest-dom';
import { cleanup, fireEvent } from '@testing-library/react';
import renderer from 'react-test-renderer';
import Header from './Header';

const { act } = renderer;
afterEach(cleanup);

describe('Header', () => {
  test('should open and close mobile menu', () => {
    // 创建一个模拟的DOM节点
    const mockNavElement = document.createElement('nav');
    
    // 临时mock useRef，让它返回我们的模拟节点
    const originalUseRef = React.useRef;
    React.useRef = jest.fn(() => ({ current: mockNavElement }));

    let headerComponent;
    act(() => {
      headerComponent = renderer.create(<Header />);
    });

    const headerRoot = headerComponent.root;
    const navContainer = headerRoot.findByType('nav');

    // 打开菜单
    act(() => {
      navContainer.children[0].props.onClick(new MouseEvent('click'));
    });

    // 模拟点击外部区域，这里需要让event.target不在mockNavElement内
    const mockOutsideElement = document.createElement('div');
    act(() => {
      fireEvent(document, new MouseEvent('click', { target: mockOutsideElement }));
    });

    const headerTree = headerComponent.toJSON();
    expect(headerTree).toMatchSnapshot();

    // 恢复原始的useRef
    React.useRef = originalUseRef;
  });
});

这种方式需要手动模拟DOM节点和ref的赋值，测试逻辑复杂，且无法完全还原真实场景，因此优先推荐方案一。

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