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

z2acfund  于 2022-12-08  发布在  Jest
关注(0)|答案(2)|浏览(220)

我需要用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>
  );
}
093gszye

093gszye1#

Material UI Autocomplete是输入标记的 Package 。事件onChange与输入标记绑定,而不是与Autocomplete组件绑定。一个可能的解决方案是使用自定义事件进行测试。

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

using-enzyme-simulate-on-custom-events

eyh26e7m

eyh26e7m2#

因为Autocomplete从onChange调用的第二个参数中获取所选的值/选项,而不是像大多数其他组件那样从event.target.value中获取。您只需在simulate调用中的事件之后添加您的值/选项作为以下参数即可。
示例:

const w = shallow(React.createElement(YourComponent, props))

const event = {};
const firstOption = w.find(Autocomplete).props().options[0];
w.find(Autocomplete).simulate('change', event, firstOption);

相关问题