模拟时尝试在酶中测试 FormControlLabel 不会触发点击

Question

我正在尝试从材质 UI 测试 FormControlLabel 组件。 当我尝试模拟点击时，酶不会在我的组件上触发点击事件。

我尝试过使用 shallow、createShallow、mount、createMount。

在调试中，我从 find 和 findWhere 查询中获取组件，从外观上看，它有一个包含所需复选框的控件。

我还尝试使用 shallow 和 mount 将检索到的 props 中的复选框包装起来，但它不起作用......

//parent.jsx
export public Parent = () => {
const [selected, setSelected] = useState(false);
const handleChange = (e,s) => {setSelected(s);};
...
return (
...
    <FormControlLabel control={
        <Checkbox onChange={handleChange} 
                checked={selected}}
label='some label'/>
...
);
}


//test.js
...
let component = createMount()(<Parent/>);

let checkbox = component.find(FormControlLabel)
.findWhere(c=>c.prop('label')==='some label').first();

checkbox.simulate('click');
checkbox.simulate('change');

//rest of the test
//the function handleChange is not called in debug.

预期：

• 模拟点击或改变应该调用onChange函数

实际：

• 不会触发更改

代码有效，测试无效。

请帮忙！！！

Answer 1

诀窍是构造一个具有checked : true 字段的事件。

修改你的代码：

let checkbox = component.find(FormControlLabel).findWhere(c=>c.prop('label')==='some label').first();
// Wrap the control prop.
enzyme.shallow(checkbox.prop('control')).simulate('change', { target : { checked : true }} );

Answer 2

试试这个

let checkbox = component.find(FormControlLabel);
checkbox.prop('control').props.onChange({ target: { checked: true }, persist: jest.fn() });

使用浅层为我工作。