Using act() in Jest Unit Tests with React-Dom

react-dom/test-utils provides a helper, act() to make sure all the tasks like rendering, user events, and data fetching (these are considered as units of interaction with a user interface) to be processed and applied to the DOM before making an assertion.

We use act() when we are using jest with react-dom. If you are using React Testing Library, the render function is already wrapped in act(). So we don’t need to use it.

Let’s write a test to assert both async and window.open functions get called if the button component below is clicked. This is a good place to use act().

Without using act(), we cannot assert window.open to be called because the assertion happens before the async function gets executed.

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …