如何从单元测试用例中设置React函数式组件的状态

1. 模拟用户点击按钮（最推荐） #

组件原本就是通过点击按钮切换状态，测试时直接模拟真实用户操作最合理，还能覆盖完整交互逻辑：

• 用React Testing Library的screen.getByRole定位按钮
• 调用fireEvent.click触发点击事件
• 断言状态变为true后的UI变化（比如特定文本显示、元素出现）

示例代码：

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

test('点击按钮后状态切换为true', () => {
  render(<TargetComponent />);
  // 找到切换按钮（根据按钮文本或role定位）
  const toggleBtn = screen.getByRole('button', { name: /切换状态/i });
  // 模拟点击
  fireEvent.click(toggleBtn);
  // 验证状态为true后的UI表现，比如显示“状态已激活”
  expect(screen.getByText('状态已激活')).toBeInTheDocument();
});

2. 强制修改组件内部状态（仅特殊场景用） #

如果不想走点击流程，直接强制改状态，但这种方法依赖React内部API，版本更新可能失效，不推荐常规使用：

• 从render返回的容器中获取组件实例
• 修改内部状态值后重新渲染

示例代码：

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

test('强制将状态设为true', () => {
  const { container } = render(<TargetComponent />);
  // 获取组件内部实例（注意：__reactInternalInstance是内部API，不稳定）
  const compInstance = container.firstChild.__reactInternalInstance;
  // 把状态改成true
  compInstance.memoizedState = true;
  // 手动触发重新渲染
  compInstance.render();
  // 验证UI变化，比如某个激活类存在
  expect(container.querySelector('.active-state')).toBeTruthy();
});

3. 给组件加受控props（优雅的测试方案） #

如果组件设计成受控模式，直接通过props传入true状态，测试更灵活：

• 组件新增isActive和onToggle props，内部状态同步props值
• 测试时直接传isActive={true}

组件示例：

import { useState, useEffect } from 'react';

function TargetComponent({ isActive = false, onToggle }) {
  const [internalActive, setInternalActive] = useState(isActive);

  // 同步props传入的状态
  useEffect(() => {
    setInternalActive(isActive);
  }, [isActive]);

  return (
    <button onClick={() => onToggle?.(!internalActive) || setInternalActive(!internalActive)}>
      {internalActive ? '已开启' : '已关闭'}
    </button>
  );
}

export default TargetComponent;

测试代码：

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

test('通过props设置状态为true', () => {
  render(<TargetComponent isActive={true} />);
  expect(screen.getByText('已开启')).toBeInTheDocument();
});

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