如何测试谁将使用钩子更改状态值的"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

第一件事：将BrockerConfigComponent作为函数意味着每次调用它都会返回新的且完全独立的实例。您将无法更改它并检查结果。让我们把它作为一个变量：

const BrockerConfigComponent = shallow(<BrockerConfigForm />).dive();

酶中的包装器(find()、filter()返回的所有内容(都是只读的。您需要在模拟操作后重新获取它：

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

也许您最好不要.find()术语变量，以避免将来出现这种情况。

现在至于state.设置或断言状态总是不好的举动，因为它是实现细节。在这里它甚至根本不起作用，因为shallow()嵌套组件(如此处Switch(未呈现/初始化。

那你能做什么呢？根据呈现结果进行验证。通过调用 props 进行交互("模拟"事件也会调用 props(。假设您的disabled变量作为 prop 传递给同一个Switch。

BrockerConfigComponent.find(Switch).simulate("change");
expect(BrockerConfigComponent.find(Switch).props().ifIDisabledProp).toBe(true);