如何在 material-ui autoComplete 组件上模拟 onChange，并使用 jest 和 enzyme 检查状态值。

Question

我需要用酶来模拟一个onChange事件来更新一个状态的组件，而这个状态的组件是不工作的，我把组件的代码分享给大家，以便得到帮助。

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

const options = [{ value: 'Option 1'}, {value: 'Option 2'}]

export default function ControllableStates() {
  const [value, setValue] = React.useState(options[0])

  return (
    <div>
      <Autocomplete
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
        getOptionLabel={(option) => option.value}
        getOptionSelected={(option, value) => option.value === value.value}
        id="controllable-states-demo"
        options={options}
        style={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Controllable" variant="outlined" />}
      />
    </div>
  );
}

Answer 1

Material UI自动完成是对输入标签的包装。onChange事件是与输入标签绑定的，而不是与Autocomplete组件绑定的。一个可能的解决方案是使用自定义事件来测试。

const controllableComponent = enzyme.mount(<ControllableStates {...props} />;
const autocompleteComponent = controllableComponent.find(Autocomplete)
autocompleteComponent().prop('onChange', event, value)

使用酶-模拟-on-custom-events。