我正在撰寫一個按鈕，單擊后將禁用該按鈕并在再次激活之前開始 60 秒倒計時。這是相關的JS代碼：
<GeneralButton variant="contained" disabled={state} onClick={onBtnClick}>
Resend verification email
<br></br>
{state ? seconds : ""}
</GeneralButton>
const [state, setState] = useState(false);
const [seconds, setSeconds] = useState(60);
useEffect(() => {
let secondsInterval: string | number | NodeJS.Timeout | undefined;
if (state === true) {
secondsInterval = setInterval(() => {
setSeconds((prev) => prev - 1);
}, 1000);
}
return () => clearInterval(secondsInterval);
}, [state]);
const onBtnClick = () => {
setSeconds(60);
setState(true);
setTimeout(() => {
setState(false);
}, 60000);
};
該按鈕實際上可以作業，但是當我撰寫如下測驗代碼時：
describe("<EmailVerificationPage />", () => {
it("button should be disabled when clicked", () => {
render(<EmailVerificationPage />);
userEvent.click(screen.getByRole("button", { name: "Resend verification email" }));
// eslint-disable-next-line jest/valid-expect
expect(screen.getByText("Resend verification email").closest("button")).toBeDisabled();
});
});
它總是表明
Received element is not disabled:
<button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1zc34d-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button" />
8 | userEvent.click(screen.getByRole("button", { name: "Resend verification email" }));
9 | // eslint-disable-next-line jest/valid-expect
> 10 | expect(screen.getByText("Resend verification email").closest("button")).toBeDisabled();
有什么不對？非常感謝任何幫助！
uj5u.com熱心網友回復：
狀態更新可能需要一些時間才能發生。將檢查放在 await waitFor 塊中并查看。
describe("<EmailVerificationPage />", async () => {
it("button should be disabled when clicked", () => {
render(<EmailVerificationPage />);
userEvent.click(screen.getByRole("button", { name: "Resend verification email" }));
// eslint-disable-next-line jest/valid-expect
await waitFor(() =>{
expect(screen.getByText("Resend verification
email").closest("button")).toBeDisabled()
});
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/520978.html