如何用Jest和React Testing Library测试React组件未导出的selectionChange函数

核心结论：不需要mock useState #

React Testing Library的核心思想是测试组件的用户可见行为，而非内部实现细节。我们不需要直接测试selectionChange函数或useState的调用，只需要验证用户操作（切换下拉选项）后，组件的表现是否符合预期即可。这种测试方式更健壮，就算后续组件内部逻辑重构，只要用户交互的结果不变，测试依然有效。

推荐的测试方案 #

直接模拟用户操作下拉框，验证选中值的变化：

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

test('切换下拉选项时，组件状态正确更新', () => {
  // 渲染组件
  render(<App />);
  
  // 获取下拉选择框元素（用role定位更符合用户视角）
  const selectBox = screen.getByRole('combobox');
  
  // 验证初始选中值为"fruit"
  expect(selectBox.value).toBe('fruit');
  
  // 模拟用户选择"Vegetable"选项
  fireEvent.change(selectBox, { target: { value: 'vegetable' } });
  
  // 验证选中值更新为"vegetable"
  expect(selectBox.value).toBe('vegetable');
  
  // 再测试切换到"Meat"
  fireEvent.change(selectBox, { target: { value: 'meat' } });
  expect(selectBox.value).toBe('meat');
});

特殊场景下mock useState的实现（不推荐） #

如果确实需要验证selectionChange是否正确调用了setValue（比如复杂逻辑下的调试需求），可以mockuseState，但这种方式依赖组件内部实现，后续维护成本高：

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

// 局部mock React的useState，保留其他原有功能
jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useState: jest.fn(),
}));

test('selectionChange触发时正确调用setValue', () => {
  // 创建mock的setValue函数
  const mockSetValue = jest.fn();
  // 让useState返回初始值和mock函数
  React.useState.mockReturnValue(['fruit', mockSetValue]);
  
  render(<App />);
  const selectBox = screen.getByRole('combobox');
  
  // 模拟选择"vegetable"
  fireEvent.change(selectBox, { target: { value: 'vegetable' } });
  // 验证setValue被传入正确参数调用
  expect(mockSetValue).toHaveBeenCalledWith('vegetable');
  
  // 模拟选择"meat"
  fireEvent.change(selectBox, { target: { value: 'meat' } });
  expect(mockSetValue).toHaveBeenCalledWith('meat');
});

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