我有一個簡單的 React UI-less 組件,用于顯示傳遞操作的狀態。有 4 種狀態 - 待處理、正在運行、已完成、失敗。這里的主要問題是運行和完成狀態必須至少持續一段時間(例如 2 秒)。我正在嘗試使用 Jest (26.6.3) 及其假計時器來測試此行為,但我無法讓它工作。組件代碼:export const TaskState = { PENDING: "pending", RUNNING: "running", FINISHED: "finished", FAILED: "failed",};export default function Task({ action, minDelay = 2000, children }) { const [state, setState] = useState(TaskState.PENDING); const [error, setError] = useState(null); const timeoutHandle = useRef(null); useEffect(() => { return () => { if (timeoutHandle.current) { clearTimeout(timeoutHandle.current); } }; }, []); const resetState = () => { setState(TaskState.PENDING); setError(null); }; const onSuccess = () => { setState(TaskState.FINISHED); timeoutHandle.current = setTimeout(resetState, minDelay); }; const onError = errMsg => { setState(TaskState.FAILED); setError(errMsg); }; const startAction = () => { setState(TaskState.RUNNING); const start = performance.now(); let err = null; try { action(); } catch (e) { err = e.message; } finally { const end = performance.now(); const elapsedTime = end - start; const delayTime = minDelay - elapsedTime; if (elapsedTime < minDelay && minDelay > 0) { timeoutHandle.current = setTimeout(() => { err ? onError(err) : onSuccess(); }, delayTime); } else { err ? onError(err) : onSuccess(); } } }; return children({ state, error, startAction, });}Task.propTypes = { action: PropTypes.func.isRequired, minDelay: PropTypes.number, children: PropTypes.func.isRequired,};調用操作回調,執行從掛起到運行的狀態轉換,但不執行從運行到失敗的下一個狀態轉換。當我手動測試它時它有效。最小示例 - https://codesandbox.io/s/heuristic-khorana-7vygv?file=/src/App.js
假計時器不會在 Jest 中正確觸發 setTimeout 調用
暮色呼如
2023-07-06 19:44:29