Introduction to Testing

React is an extremely easy-to-use UI library compared to many others. It gives us the opportunity to iterate and prototype very fast, cutting the time to the customer by orders of magnitude.

But every upside comes with a downside. Since React does not enforce any structure and gives no recipes, it is very easy to make mistakes. This is where testing comes into play.

What is testing?

Testing is a process that validates the behaviour of an actual system by comparing it to the specified desired behaviour. Most of the time, testing is automated. Testing gives you a way to check whether your whole application functions correctly by running a single command.

Under the influence of testing, Test-Driven-Development (TDD) was born. This is a programming methodology that focuses on the importance of testing. The main concept of TDD is to write tests first, watch them fail, and write production code to fix them after.

By following TDD, you ensure that your whole system is testable from day one. If you try to integrate tests into an app that was not developed with testing in mind, you are going to have a hard time. This is because testing demands a certain structure from your code that you can not comprehend until you start testing it.

In the following lessons, you will learn how to properly follow TDD, write meaningful tests, and keep your codebase consistent.

Different types of testing

There are many ways to test code. Here we will focus on the two most used types of testing unit testing and integration testing.

Unit testing

Unit testing, as you probably guessed, has to do with testing units. Units are a vague term, but it most often refers to functions or classes, i.e., singular units of a system. In addition, testing these entities in isolation is another defining characteristic of unit tests. Suppose you have a button on your app that sends an HTTP request. While testing the button, you do not care if the HTTP request goes through. You just want to check if the button triggers it. Likewise, when you are testing the HTTP request, you do not care if a button triggered it; you just want to see if the request is sent correctly. Once you have tested all components of the system in isolation, you can be confident the system will behave as it should.

Or will it? As Aristotle once said, “The whole is greater than the sum of its parts.” Even if you tested every single bit of the system in isolation, you still want to check if they correctly interface with each other. But this is out of scope for unit testing. Instead, this is where you are going to need integration testing.

Integration testing

Integration testing refers to testing the system as a whole or as a regular user would. But this is more complex than unit testing and will require extensive setup. Usually, integration tests involve running a browser and automatically performing actions in it. For example:

1. Open the app
2. Fill in credentials
3. Press the LOGIN button
4. Check that the profile page opens.

One particularly useful case for integration tests is the acceptance criteria. For example, you can write an integration test for a particular user story to allow the developers to know exactly what kind of behaviour the user is looking for.

The diagram below should help you understand the difference between integration tests and unit tests. To implement a particular user story, you need to develop many small features across the project. Each one of those are tested with unit tests. When the features add up, they are tested with integration tests to make sure the system is working correctly.

Quick recap

• Testing is a process that validates the behaviour of an actual system by comparing it to the specified desired behaviour.
• We are interested in unit and integration testing.
• Unit testing refers to testing each entity of a system in isolation.
• Integration testing refers to testing the system as a whole.