In my spare time, I enjoy watching sci-fi movies and cheering for Arsenal FC. semantic-ui which is a CSS framework for some ease in styling.Emmanuel John Follow I'm a full-stack software developer, mentor, and writer.Only a couple of additional packages are added to the project. I have used the latest version of create-react-app (CRA) i.e. For the full source code, feel free to follow the links. Here I will be discussing the overall architecture of the app and highlight the main parts. In the long term, the app’s implementation may change, but you want to make sure that the user experience doesn’t break.Īnother advantage is, react-testing-library comes out of the box with create-react-app, starting from version 3.3.0, so no additional effort spent in setting things up. The main philosophy behind this library is that it encourages you to test your app in a way that resembles the way your app is used, rather than testing the implementation itself. I felt it has a much simpler and intuitive API compared to Enzyme.Īccording to its author, Kent C Dodds, react-testing-library is A simpler replacement for enzyme that encourages good testing practices. RTL is quickly rising in popularity as an alternative to Enzyme. We will be diving deeper into component unit testing using the Jest framework and react-testing-library (RTL). The main goal of this guide is to learn unit testing react components by adding tests for our demo app. I also assume that you have basic familiarity with testing and jest in general. To follow along with this guide, you must have a basic understanding of how to build apps using React as we will not be discussing this aspect in detail. After that, we will unit test each of our components.

Firstly, we will go through the overall app architecture to understand the functionality and what each component in the app is responsible for. I have prebuilt a simple Todo App using React. In this guide, we will take a look at unit testing our React App components.

Todolist react