Enzyme无法在React Material-UI v1 Select组件上模拟change事件

我之前也踩过这个坑！Material-UI的Select组件是封装过的高阶组件，不像原生input那样直接模拟change事件就生效，得针对它的DOM结构和组件层级来调整测试方式。结合你给出的依赖版本（Material UI 1.0.0-beta.35、React 16.2.0），给你几个亲测有效的解决方案：

方法一：模拟下拉展开+选项点击（最贴近用户真实操作） #

这种方式完全模拟用户的交互流程：点击Select触发下拉，再点击对应选项。适合用mount渲染（shallow可能无法渲染完整的下拉菜单）。

import React from 'react';
import { mount } from 'enzyme';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import YourComponent from './YourComponent';

describe('YourComponent', () => {
  it('updates selected value when Select option is clicked', () => {
    const wrapper = mount(<YourComponent />);
    
    // 1. 找到Select的根元素，模拟点击打开下拉菜单
    wrapper.find('.MuiSelect-root').simulate('click');
    
    // 2. 找到目标MenuItem（这里选第一个，也可以用text或value筛选）
    const targetOption = wrapper.find(MenuItem).first();
    targetOption.simulate('click');
    
    // 3. 断言组件状态/props是否更新（根据你的组件逻辑调整）
    expect(wrapper.state('selectedValue')).toBe(targetOption.props().value);
  });
});

如果你的Select是嵌套在TextField里（用TextField select属性实现的下拉），需要多深入一层：

// 找到TextField内部的Select根元素
wrapper.find('.MuiTextField-root .MuiSelect-root').simulate('click');

方法二：直接给内部input模拟change事件 #

如果不需要模拟完整的下拉交互，只想测试值变更后的逻辑，可以直接定位到Select内部的原生input元素，模拟change事件：

import { mount } from 'enzyme';

it('triggers value change via input simulation', () => {
  const wrapper = mount(<YourComponent />);
  
  // 找到Select组件内部的input元素
  const selectInput = wrapper.find(Select).find('input').first();
  
  // 模拟change事件，传入目标value
  selectInput.simulate('change', { target: { value: 'your-target-value' } });
  
  // 断言逻辑
  expect(wrapper.instance().handleSelectChange).toHaveBeenCalledWith(expect.any(Object));
  expect(wrapper.state('selectedValue')).toBe('your-target-value');
});

关键注意事项 #

• 组件层级问题：如果用shallow渲染，需要用.dive()深入Select组件的内部（因为它是高阶组件），比如：

  const select = wrapper.find(Select).dive();
  select.find('input').simulate('change', { target: { value: 'test' } });
  

• 类名变化：Material-UI beta版本的类名可能和正式版不同，如果找不到元素，用wrapper.debug()打印当前渲染的DOM结构，确认正确的选择器（比如当时beta版的Select根类是MuiSelect-root，别用错了）。
• 状态/回调断言：如果你的组件是通过props传递onChange回调，记得用jest.fn()模拟回调函数，然后断言它是否被正确调用。

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