Unit Testing to Integration Testing

Testing source code is essential to programming and should be seen as a mandatory exercise for serious developers. We want to verify our source code’s quality and functionality before using it in production. The testing pyramid will serve as our guide.

The testing pyramid includes end-to-end tests, integration tests, and unit tests. Unit tests are used for small, isolated blocks of code, such as a single function or component. Integration tests help us figure out if these units work well together. An end-to-end test simulates a real-life scenario, such as the login flow in a web application. Unit tests are quick and easy to write and maintain; end-to-end tests are the opposite.

We want to have many unit tests covering our functions and components. After that, we can use several integration tests to make sure the most important functions and components work together as expected. Finally, we may need a few end-to-end tests to simulate critical scenarios. In this learning experience, we will cover unit and integration tests, along with a component specific testing technique called snapshot tests. E2E tests will be part of the exercise.

Since there are many testing libraries, it can be challenging to choose one as a beginner to React. We will use Jest by Facebook as a testing framework to avoid making this tutorial too opinionated. Most of the other testing libraries for React use Jest as foundation, so it’s a good introduction.

Unit to Integration Testing

Often the lines between unit and integration tests are unclear. Testing the List component with its Item component could be considered an integration test, but it could also be a unit test for two tightly coupled components. In this section, we start with unit testing and move towards integration testing. Everything in between is a spectrum between both.

Let’s start with a pseudo test in your src/App.test.js file: