Question

给出以下简单组件：

function ValueInput(props) {
  const [val, setVal] = useState(props.value);

  function onChange (val) {
    setVal(val);
    props.onValueChanged(val);
  }

  return <input value={val} onChange={onChange}/>;
}

function MyComponent(props) {
  const [val, setVal] = useState(props.value);

  function onValueChanged (val) {
    setVal(val);
  }

  return (
    <div>
      <div>{val}</div>
      <ValueInput value={val} onValueChanged={onValueChanged}/>
    </div>
  );
}

我安装它们是为了用酶和Jest测试它们：

const component = mount(<MyComponent value={42}/>);
const inputEl = component.find('input');

如何更改内部组件的值以使对ValueInput的任何更改都反映在MyComponent上？我正在尝试使用以下代码，但是它不起作用：

console.log(component.debug());
valueInputEl.setProps({value: 24});
// component.update();
console.log(component.debug());

然后出现以下错误：

ReactWrapper::setProps() can only be called on the root

Answer 1

您可以shallow挂载MyComponent，然后通过触发onValueChanged子组件的ValueInput属性来测试它，并通过检查值来测试状态的变化子组件的道具。

  test('That the parent element is changed when the child component is changed', () => {
    const component = shallow(<MyComponent value={42} />);
    component.find(ValueInput).prop('onValueChanged')(24);
    expect(component.find(ValueInput).prop('value')).toBe(24);
    console.log(component.debug());
  });

然后在其自己的组件测试中测试ValueInput的{{1}}方法的行为，使其更像是单元测试。

如何使用React-Enzyme在子组件上设置属性

1 个答案: