React 18单元测试替代Enzyme：如何测试组件内部函数？

一、优先推荐：将内部函数抽离为独立模块 #

这是最符合现代React测试理念的做法——把组件内的业务逻辑从UI渲染中分离出来，单独编写单元测试，避免直接依赖组件实例。

比如，原来的Chat组件：

// Chat.jsx
class Chat extends React.Component {
  handleOnSendMessage = (message) => {
    // 处理消息发送逻辑：验证格式、调用API等
    if (!message.trim()) return;
    this.props.onMessageSend(message);
  };

  render() { /* ... */ }
}

可以把handleOnSendMessage抽离到单独的工具模块：

// chatUtils.js
export const handleOnSendMessage = (message, onMessageSend) => {
  if (!message.trim()) return;
  onMessageSend(message);
};

// Chat.jsx
import { handleOnSendMessage } from './chatUtils';

class Chat extends React.Component {
  handleSend = (message) => {
    handleOnSendMessage(message, this.props.onMessageSend);
  };

  render() { /* ... */ }
}

然后直接对工具函数写单元测试：

// chatUtils.test.js
import { handleOnSendMessage } from './chatUtils';

test('handleOnSendMessage 会过滤空消息', () => {
  const mockOnSend = jest.fn();
  handleOnSendMessage('', mockOnSend);
  expect(mockOnSend).not.toHaveBeenCalled();
});

test('handleOnSendMessage 会调用传入的回调并传递有效消息', () => {
  const mockOnSend = jest.fn();
  const testMessage = 'Hello World';
  handleOnSendMessage(testMessage, mockOnSend);
  expect(mockOnSend).toHaveBeenCalledWith(testMessage);
});

二、测试类组件的内部方法（兼容React 18） #

如果你的Chat组件是类组件，且无法抽离逻辑，可以通过render获取组件实例，结合Jest间谍来测试：

// Chat.test.js
import { render } from '@testing-library/react';
import Chat from './Chat';

test('调用 handleOnSendMessage 会触发消息发送回调', () => {
  const mockOnMessageSend = jest.fn();
  // 渲染组件并获取容器
  const { container } = render(<Chat onMessageSend={mockOnMessageSend} />);
  // 获取组件实例（依赖React内部挂载逻辑）
  const chatInstance = container.firstChild._internalInstance?.memoizedState?.element?.type?.instance;
  
  // 创建间谍监听handleOnSendMessage
  const spy = jest.spyOn(chatInstance, 'handleOnSendMessage');
  
  // 直接调用实例方法
  chatInstance.handleOnSendMessage('Test message');
  
  expect(spy).toHaveBeenCalledWith('Test message');
  expect(mockOnMessageSend).toHaveBeenCalledWith('Test message');
  
  // 清理间谍
  spy.mockRestore();
});

注意：这种方式依赖React内部实现细节，可能在版本更新时失效，仅作为临时兼容方案，优先推荐抽离逻辑。

三、测试函数组件的内部函数（React 18） #

函数组件没有实例，无法直接获取内部函数，可通过以下两种方式处理：

1. 模拟依赖，间接验证函数逻辑 #

如果内部函数依赖props或外部服务，通过模拟这些依赖，触发组件的交互行为，间接验证函数的执行结果：

// Chat.jsx（函数组件）
const Chat = ({ onMessageSend }) => {
  const handleOnSendMessage = (message) => {
    if (!message.trim()) return;
    onMessageSend(message);
  };

  return (
    <div>
      <input type="text" data-testid="message-input" />
      <button onClick={() => handleOnSendMessage(document.querySelector('[data-testid="message-input"]').value)} data-testid="send-btn">发送</button>
    </div>
  );
};

测试时通过触发UI交互验证逻辑：

// Chat.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import Chat from './Chat';

test('点击发送按钮时，handleOnSendMessage 会处理有效消息', () => {
  const mockOnMessageSend = jest.fn();
  render(<Chat onMessageSend={mockOnMessageSend} />);
  
  const input = screen.getByTestId('message-input');
  const sendBtn = screen.getByTestId('send-btn');
  
  // 测试空消息
  fireEvent.change(input, { target: { value: '   ' } });
  fireEvent.click(sendBtn);
  expect(mockOnMessageSend).not.toHaveBeenCalled();
  
  // 测试有效消息
  fireEvent.change(input, { target: { value: 'Hello React' } });
  fireEvent.click(sendBtn);
  expect(mockOnMessageSend).toHaveBeenCalledWith('Hello React');
});

2. 通过useRef暴露内部函数（特殊场景使用） #

如果必须直接调用内部函数，可以通过useRef在测试环境下暴露函数：

// Chat.jsx
import { useRef, useEffect } from 'react';

const Chat = ({ onMessageSend, testRef }) => {
  const handleOnSendMessage = (message) => {
    if (!message.trim()) return;
    onMessageSend(message);
  };

  // 仅在测试环境下暴露函数
  useEffect(() => {
    if (testRef) {
      testRef.current = { handleOnSendMessage };
    }
  }, []);

  return (/* ... */);
};

测试时通过ref获取函数并调用：

// Chat.test.js
import { render } from '@testing-library/react';
import Chat from './Chat';

test('直接调用 handleOnSendMessage 验证逻辑', () => {
  const mockOnMessageSend = jest.fn();
  const testRef = { current: {} };
  
  render(<Chat onMessageSend={mockOnMessageSend} testRef={testRef} />);
  
  // 获取内部函数
  const { handleOnSendMessage } = testRef.current;
  
  handleOnSendMessage('Test message');
  expect(mockOnMessageSend).toHaveBeenCalledWith('Test message');
  
  handleOnSendMessage('   ');
  expect(mockOnMessageSend).not.toHaveBeenCalled();
});

注意：这种方式会给组件添加测试专用代码，污染生产环境逻辑，仅在无法抽离逻辑且必须直接测试函数时使用。

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