如何使用钩子更改状态值的“ onChange”功能测试

Question

如何测试“ onChange”功能谁将通过钩子改变国家的价值直接在react js中使用anzyme。如何测试“ onChange”功能谁将通过钩子改变国家的价值直接在react js中使用anzyme。

function BrockerConfig(props) {
  const [disabled, setDisabled] = useState(false);

  return (
    <Switch
      onChange={setDisabled}
      checkedChildren={<IntlMessages id="settings.Switch.Activation" />}
      unCheckedChildren={<IntlMessages id="settings.Switch.Deactivation" />}
    />
  );
}

it("onChange state of Disabled", () => {
  const BrockerConfigComponent = () => shallow(<BrockerConfigForm />).dive();
  const TotalSwitchs = BrockerConfigComponent().find(Switch);
  expect(TotalSwitchs.length).toBe(1);

  TotalSwitchs.simulate("change", "true");
  expect(TotalSwitchs.state("disabled")).toEqual("true");
});

Answer 1

包装酶（由find()，filter()返回的所有内容）are read-only。您需要在模拟操作后重新获取它：

  TotalSwitchs.simulate("change", "true");
  expect(BrockerConfigComponent().find(Switch).state("disabled")).toEqual("true");

为了避免将来再出现这种情况，最好不要将.find()放在中间变量中。