单击复选框后，如何测试某些元素是否正确启用/禁用

Question

我正在尝试测试一个具有<Switch/>(使用Material UI(和<TextField/>的组件。当用户单击此开关时，它会启用/禁用另一个字段(<TextField/>(。代码运行良好，但我使用JEST的测试总是失败。

...
export function MyComponent(): JSX.Element{
const [enableExpiresOn, setEnableExpiresOn] = useState(false);
...
function handleAccountExpiresOn(e: React.ChangeEvent<HTMLInputElement>) {
setEnableExpiresOn(e.target.checked);
}
return (
<form ...>
...
<div>
<FormControlLabel
control={
<Switch
id="account-expires"
onChange={handleAccountExpiresOn}
name="account-expires"
color="primary"
checked={enableExpiresOn}
/>
}
label={t("Account Expires On")}
/>
</div>
<div>
<TextField
id="account-expires-on"
label={t("Account Expires On")}
type="datetime-local"
variant="outlined"
required={enableExpiresOn}
InputLabelProps={{
shrink: true,
}}
disabled={!enableExpiresOn}
/>
</div>
...
</form>
);
}

在我的JEST测试文件中，我有以下内容(正如你所看到的，我正试图模拟Switcher中的点击(：

describe("Should render correctly", () => {
let wrapper;
beforeAll(() => {
wrapper = mount(<MyComponent />);
});
...
fit("Should enable Account Expires On when switcher is on/checked", async () => {
wrapper.find("#account-expires").at(0).simulate("click");
expect(
wrapper.find("#account-expires-on").get(0).props.disabled
).toEqual(false);
});

然而，Jest在这个期望中给了我一个错误，说它收到了true而不是false。

我试着在期望值周围设置一个setTimeout，希望它能解决问题，因为也许我们需要等待点击生效，但它不起作用。

我是JEST和React Hooks的新手。所以，我不知道这是测试这种行为的最好方法，还是有更好的方法。

使用的技术

• 反作用挂钩
• NextJS
• 材料UI
• TypeScript
• Jest
• 酶

Answer 1

useState是异步的，在元素被禁用之前对断言进行检查。

可以尝试：

describe("Should render correctly", () => {
let wrapper;
beforeAll(() => {
wrapper = mount(<MyComponent />);
});
...
fit("Should enable Account Expires On when switcher is on/checked", () => {
jest.useFakeTimers()
wrapper.find("#account-expires").at(0).simulate("click");
jest.runAllTimers()
// or possibly
// await new Promise(resolve => setTimeout(resolve, 0))
expect(
wrapper.find("#account-expires-on").get(0).props.disabled
).toEqual(false);
});

并且可以在谷歌上搜索

UPD

可以尝试从这里模拟onChange事件或wrapper.find("#account-expires").at(0).props().onChange();

测试库的类似问题https://github.com/mui-org/material-ui/issues/17697