使用Enzyme测试时无法设置Dropdown组件内select元素的值

核心问题点 #

• 事件模拟参数格式错误：调用simulate时直接传递{ value: 'item2' }不符合React合成事件规范，change事件的取值需要挂载在target属性下。
• 组件为非受控模式：从打印的DOM结构可看到select使用的是defaultValue属性，属于非受控组件，选中值不会同步到props的value字段上，直接读取props().value必然返回undefined。

修复方案 #

方案1：不修改组件源码，仅调整测试用例 #

it('should execute onChange once and change value to "item2"', () => {
        const onChangeMock = jest.fn();
        const wrapper = mount(
            <Dropdown{ ...args } 
                onChange={ onChangeMock } 
                listItems={ ['item1', 'item2', 'item3'] } />
        );

        // 调整事件参数格式，把value放到target属性下
        wrapper.find('select').simulate('change', { target: { value: 'item2' } });

        // 读取DOM实例的真实选中值，而非props上不存在的value字段
        expect(wrapper.find('select').instance().value).toBe('item2');
        expect(onChangeMock.mock.calls.length).toBe(1);
    });

方案2：将组件调整为受控模式（适配需要受控的业务场景） #

修改Dropdown组件内部逻辑：

1. 新增value作为组件入参props
2. 将select的defaultValue属性替换为value={props.value}
3. 若组件内部维护状态，需在onChange触发时更新内部状态，同步绑定到select的value属性
   调整完成后原测试用例读取props().value的逻辑不需要修改即可正常运行。

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