Introduction: When it comes to developing modern web applications, choosing the right frontend framework is essential. With numerous options available, each with its own strengths and weaknesses, it’s important to evaluate and compare different frameworks to find the best fit for your project. In this blog post, we will compare …

We can debug the jest test with console.log (make sure to remove the –silent option). But, attaching a debugger and stepping through the tests sometimes may help us to troubleshoot quicker under certain circumstances. 1. Install Jest Plugin Install Jest plugin. 2. Configure Press cmd + shift + p. Find …

Since the release of React 18, VFC has been deprecated. FunctionalComponent (FC) does not have implicit children any more. See this pull request. It states: Since the release of the React 18 types we haven’t seen any use case for FunctionComponent with implicit children beyond "it breaks existing stuff". As …

I had an issue with react-day-picker flickering hover state between mouseenter and mouseleave when the cursor was on the edge of the day I was trying to select. This is not a bug in the library. It was the custom style I added to the hover state that was causing …

When you develop a react library locally, you can use yarn link to link the repo for the react module to the react app. In this way, the react app will use the local version of the module. 1. Go to the module source repo. 1yarn link 2. Go to …

When you are running jest and encounter the error below, the solution is simple. You need to add transformIgnorePatterns in the jest config. For example, you can simply add this in your package.json. This is usually caused by using a third party library that uses ES module. 12345"jest": {   …

JavaScript module system has been evolving as the language and technology evolves. There are a few different modules systems you can choose when you are bundling a JS library. The best module system for a frontend component library is ESM. It stands for ES Modules. It is It is the …

SVG stands for Scalable Vector Graphic. The svg image can scale up and down according the size of the outer container as long as the image width is set to 100%. Let’s explore how we can make a React illustration component that supports multiple size by scaling up and down. …

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 …

When we Type React functional components, it is better to use React.VoidFunctionComponent (React.VFC) instead of React.FC. React.FC always includes the children prop on your component whether you want or not. We can get around this by adding children?: never on your custom prop. However, it is much cleaner to use …