如何使用 React-Enzyme 模拟改变孩子的价值答案

【问题标题】：How to simulate changing the value of a child with React-Enzyme如何使用 React-Enzyme 模拟改变孩子的价值
【发布时间】：2019-07-31 07:43:37
【问题描述】：

给定以下简单组件：

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

  return <input value={val} onChange={v => setVal(v)}/>;
}

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

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

我正在安装它们以便用 Enzyme 和 Jest 测试它们：

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

如何模拟更改内部输入的值并将其反映在 div 中？我正在尝试使用以下代码，但它不起作用：

console.log(component.debug());
inputEl.simulate('change', { target: { value: 24 } });
// component.update();
console.log(component.debug());

即使强制更新也不会更改值。打印的组件保持不变：

  <MyComponent value={42}>
    <div>
      <div>
        42
      </div>
      <ValueInput value={42}>
        <input value={42} onChange={[Function: onChange]} />
      </ValueInput>
    </div>
  </MyComponent>

【问题讨论】：

标签： reactjs jestjs enzyme

【解决方案1】：

在你的代码中

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

  return <input value={val} onChange={v => setVal(v)}/>;
}

您只是更改子组件的值，父组件的值不受影响，因为您没有调用父组件的 setVal 方法。

您需要更新您的代码：

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

  const handleChange = e => {
    const {value} = e.target;
    setVal(value);
    props.setParentVal(value) // Pass the changed value to the parent
  }

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

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

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

同样看代码，你的子组件内部不需要复制状态，可以直接使用父组件的方法来操作和存储输入值：

function ValueInput ({val, setVal}) {
   return <input value={val} onChange={setVal}/>;
}

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

 const handleChange = e => {
    const {value} = e.target;
    setVal(value);
  }

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

【讨论】：