React

When writing unit tests using Jest and React Testing Library, you might encounter this error: Jest Worker Encountered 4 Child Process Exceptions, exceeding retry limit This usually signals that Jest retried your test multiple times across its worker threads but failed each time, eventually giving up. Here’s how I traced the root cause of this issue and resolved it. The Culprit: fireEvent and Asynchronous Side Effects At first glance, my test code looked fine. I was using fireEvent.click to simulate user interaction. But here’s the catch — while fireEvent is a synchronous function, the side effects it triggers (like state updates or calls inside useEffect) are often asynchronous. ...

In React, you can use combination of Context and custom hooks to implement async modals. Async modals let you capture the response from modal asynchronously, saving the hassle of managing another state and improves readibility. Let’s try to build it from the ground up: 1. Bare bones App.js function App() { const [isModalOpen, setIsModalOpen] = useState(false); const onResponseClick = (response) => { setIsModalOpen(false); console.log(response); }; return ( <div> {isModalOpen && <Modal onResponseClick={onResponseClick} />} <button onClick={() => { setIsModalOpen(true); }} > Open Modal </button> </div> ); } To get the response (yes/no) from the modal, App component is forced to manage isModalOpen state and include <Modal /> component in its JSX. We know there is a better way to manage this by using Context. ...