我需要用enzyme模拟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>
);
}
2条答案
按热度按时间093gszye1#
Material UI Autocomplete是输入标记的 Package 。事件onChange与输入标记绑定,而不是与Autocomplete组件绑定。一个可能的解决方案是使用自定义事件进行测试。
using-enzyme-simulate-on-custom-events
eyh26e7m2#
因为Autocomplete从onChange调用的第二个参数中获取所选的值/选项,而不是像大多数其他组件那样从
event.target.value
中获取。您只需在simulate
调用中的事件之后添加您的值/选项作为以下参数即可。示例: