如何使用Jest模拟useState完成React组件单元测试

核心原则：永远不要直接模拟React内置的useState钩子。这种做法会打断React真实的状态调度逻辑，导致测试结果和线上实际运行表现完全脱节。单元测试要验证的是用户操作触发的实际结果，不是钩子本身的实现细节。

先修正原代码的基础问题 #

你贴的示例代码有几个会导致运行/测试失败的语法问题，先调整：

function Parent () {
    const [country, setCountry] = useState(true)
    // 把状态和setter都透传给子组件，方便后续断言
    return (
        <Child setCountry={setCountry} country={country} />
    )
}

function Child ({ setCountry }) { // 必须接收父组件传入的setCountry prop，否则会拿不到方法
    const handleValueClear = () => {
        setCountry(false)
        const data = {
            id : 'IND',
            name : 'India'
        }
        dispatch(handleCountryDetails(data))
    }
    return (
        <div>
            {/* React事件是小驼峰onClick，全小写onclick是原生DOM写法，在JSX里不生效 */}
            <button onClick={handleValueClear}>Click me</button>
            {/* 加个测试标识节点，方便验证状态变化 */}
            <span data-testid="country-flag">{country ? '默认国家' : '印度'}</span>
        </div>
    )
}

测试实现方案 #

分两种测试场景，都不需要mock useState：

场景1：测试父子组件联动的完整逻辑 #

直接渲染持有状态的父组件，模拟用户真实操作，断言最终UI和副作用表现即可：

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
// mock项目里的dispatch方法
jest.mock('@/store', () => ({
  dispatch: jest.fn(),
  handleCountryDetails: jest.fn((data) => ({ type: 'UPDATE_COUNTRY', payload: data }))
}))

test('点击按钮后正确更新国家状态、触发数据上报', async () => {
  const user = userEvent.setup()
  // 直接渲染父组件，走React真实的状态流
  render(<Parent />)

  // 验证初始状态符合预期
  expect(screen.getByTestId('country-flag')).toHaveTextContent('默认国家')

  // 模拟用户点击按钮的真实操作
  await user.click(screen.getByRole('button', { name: 'Click me' }))

  // 验证状态更新后的UI表现——这一步就间接证明setCountry被正确调用，状态从true变成了false
  expect(screen.getByTestId('country-flag')).toHaveTextContent('印度')
  // 验证dispatch副作用被正确触发
  expect(handleCountryDetails).toHaveBeenCalledWith({ id: 'IND', name: 'India' })
  expect(dispatch).toHaveBeenCalledWith({
    type: 'UPDATE_COUNTRY',
    payload: { id: 'IND', name: 'India' }
  })
})

场景2：单独测试Child组件逻辑 #

不需要渲染父组件，也不需要mock useState，只要给子组件传入一个mock的setter方法即可：

test('子组件点击事件逻辑正确', async () => {
  const user = userEvent.setup()
  // 自己构造mock的set方法传入组件，不需要改动React内部的useState实现
  const mockSetCountry = jest.fn()
  render(<Child setCountry={mockSetCountry} />)

  await user.click(screen.getByRole('button', { name: 'Click me' }))

  // 断言传入的setter被正确调用
  expect(mockSetCountry).toHaveBeenCalledWith(false)
  // 断言dispatch逻辑正确
  expect(dispatch).toHaveBeenCalled()
})

强行mock useState是测试反模式：你相当于手动伪造了React的状态逻辑，哪怕实际代码里事件绑定写错、setState传参错误，mock逻辑也可能让测试用例误判通过，完全失去单元测试的价值。

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