React + Jest：测试setTimeOut没有被调用

Question

我目前在useEffect中有一个setTimeOut，我可以使用进行测试

jest.useFakeTimers();
jest.advanceTimersByTime(5000);

而且效果很好。但是，随着successMessage的更改，setTimeout会被触发几次。如何编写一个测试来检查只有当successMessage不是空字符串时才调用setTimeOut？

我正在使用笑话和反应测试库。

这是我的反应代码。

enum HELPER_MESSAGES {
SUCCESS = 'Congratulations you signed up!',
ERROR = 'Email address invalid',
}
export function EmailCapture (): ReactElement {
const [inputValue, setInputValue] = useState<string>('');
const [errorMessage, setErrorMessage] = useState<string>('');
const [successMessage, setSuccessMessage] = useState<string>('');
function handleOnClick (): void {
const EMAIL_REGEX: RegExp = /^[a-zA-Z0-9]+([-._][a-zA-Z0-9]+)*@([a-zA-Z0-9]+(-[a-zA-Z0-9]+)*.)+.+[a-zA-Z]{2,}$/;
const isInputValid: boolean = EMAIL_REGEX.test(inputValue) && inputValue !== '';
if (isInputValid) {
setSuccessMessage(HELPER_MESSAGES.SUCCESS);
} else {
setErrorMessage(HELPER_MESSAGES.ERROR);
}
}
useEffect((): () => void => {
const resetAfterSuccessTimer: NodeJS.Timeout = setTimeout((): void => {
setSuccessMessage('');
}, 5000);
return (): void => {
clearTimeout(resetAfterSuccessTimer);
};
}, [successMessage]);
function handleOnChange (e: ChangeEvent<HTMLInputElement>): void {
setInputValue(e.target.value);
setErrorMessage('');
setSuccessMessage('');
}
return (
<TextInput
onChange={handleOnChange}
error={errorMessage}
success={successMessage}
value={inputValue}
/>
);
}

我正在关注TDD，所以我想写一个测试，让我写以下代码：

useEffect((): () => void => {
let resetAfterSuccessTimer: NodeJS.Timeout;
if (successMessage) {
resetAfterSuccessTimer= setTimeout((): void => {
setSuccessMessage('');
setButtonText('Sign up!');
console.log('sexy');
}, 5000);
}
return (): void => {
clearTimeout(resetAfterSuccessTimer);
};
}, [successMessage]);

sexy字应该只记录控制台一次。

Answer 1

根据他们的文档找到了答案：https://jestjs.io/docs/timer-mocks，您只需执行以下操作：

expect(setTimeout).not.toHaveBeenCalled();

当你想检查它是否被调用过一次时，你可以这样做：

expect(setTimeout).toHaveBeenCalledTimes(1);

注意：这是在测试一个实现细节，所以要注意这一点。