Jest中如何检测函数组件的state值？解决类组件限制报错

你遇到的问题很典型——Enzyme的state()方法只支持类组件，函数组件的状态是封装在闭包中的，没法通过这个API直接获取。下面给你几种可行的解决方案：

方法1：用React Testing Library（推荐） #

React Testing Library的核心理念是模拟真实用户行为，通过UI变化间接断言状态，而不是直接操作组件内部状态。这种方式更贴近用户实际使用场景，测试也更健壮，不会依赖组件的内部实现细节。

假设你的speciality状态会绑定到一个下拉框或输入框，你可以这样测试：

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

test('speciality state updates correctly when user interacts', () => {
  render(<SearchProviders />);
  
  // 找到关联speciality状态的UI元素（这里用标签文本定位，也可以用role、id等）
  const specialitySelect = screen.getByLabelText('选择科室');
  
  // 模拟用户选择新选项的行为
  fireEvent.change(specialitySelect, { target: { value: 'Clinic' } });
  
  // 通过断言UI的变化，间接验证状态已更新
  expect(specialitySelect).toHaveValue('Clinic');
});

方法2：抽离自定义Hook单独测试（适配Enzyme场景） #

如果你的状态逻辑比较复杂，或者坚持使用Enzyme，可以把speciality相关的状态逻辑抽成独立的自定义Hook，单独测试这个Hook：

// useSpeciality.js
import { useState } from 'react';

export function useSpeciality(initialValue = 'Hospital') {
  const [speciality, setSpeciality] = useState(initialValue);
  // 这里可以添加和speciality相关的其他逻辑
  return { speciality, setSpeciality };
}

修改原组件使用这个自定义Hook：

// component.jsx
import { useSpeciality } from './useSpeciality';

export function SearchProviders({ changeRoute }) {
  const { speciality, setSpeciality } = useSpeciality();
  // 原组件逻辑不变
}

然后用@testing-library/react-hooks测试自定义Hook：

import { renderHook, act } from '@testing-library/react-hooks';
import { useSpeciality } from './useSpeciality';

test('useSpeciality initializes and updates correctly', () => {
  const { result } = renderHook(() => useSpeciality());
  
  // 断言初始状态
  expect(result.current.speciality).toBe('Hospital');
  
  // 模拟状态更新
  act(() => {
    result.current.setSpeciality('Clinic');
  });
  
  // 断言更新后的状态
  expect(result.current.speciality).toBe('Clinic');
});

方法3：Mock useState（不推荐，依赖内部实现） #

如果只是临时需要直接跟踪状态变化，可以用Jest mock掉React的useState，强制暴露状态和更新函数。但这种方法不推荐，因为测试会绑定组件的内部实现，一旦组件重构（比如换成useReducer），测试就会失效。

import React from 'react';
import { shallow } from 'enzyme';
import { SearchProviders } from './component';

// Mock React的useState
jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useState: jest.fn(),
}));

test('track speciality state changes', () => {
  const mockSetSpeciality = jest.fn();
  // 初始化mock的useState返回值
  React.useState.mockReturnValue(['Hospital', mockSetSpeciality]);
  
  const wrapper = shallow(<SearchProviders />);
  
  // 模拟用户触发change事件
  const specialityInput = wrapper.find('#speciality');
  specialityInput.simulate('change', { target: { value: 'Clinic' } });
  
  // 断言setSpeciality被调用了正确的参数
  expect(mockSetSpeciality).toHaveBeenCalledWith('Clinic');
});

总结一下，优先选择React Testing Library的用户行为驱动测试，其次抽离自定义Hook单独测试，尽量避免直接访问函数组件的内部状态。

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