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 …
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 …
How to configure debugger when running jest for React unit tests with VS Code
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 …
Running Jest when you are importing a file which Jest cannot parse
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": { …
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 …
Data Provider Pattern with Jest
Jest has the for method that enables us to do a data provider pattern. for works on both describe and it. It is better to use it in describe so that the assertion messages in it can be dynamically generated.
What You May Not Know About Jest’s Mount Method
If you are a React developer, you probably know the difference between mount and shallow when you are unit testing react components with jest. Mount renders full DOM. We use it when the component interacts with DOM Api or require a full lifecycle to fully test the component. On the …
React Unit Test Code Snippets with Jest and Enzyme
Sometimes all I need is to see a snippet of code without much explanation when I try to find a solution online. This is because I am familiar enough with the language and framework and need a quick reminder. So, here it is. I created a post with a few …
Unit Testing React Form with Jest and Enzyme
Jest is a JavaScript unit testing framework created by Facebook. I usually use mocha for unit testing Node.js code, but when it comes to testing React, Jest combined with Enzyme is pretty much the best. Enzyme is a JavaScript utility library created by Airbnb. It lets you simulate DOM rendering …