DEV Community

Cover image for 3 Things You Should Know Before Testing React App
Fadhil Radhian
Fadhil Radhian

Posted on • Edited on

3 Things You Should Know Before Testing React App

Hello, folks. 👋

As I promised, here is the second part of this Testing series. Before we jump into some more code, we will discuss several important topics about testing, that will also help understand the test code later on. These are the topics :

  1. Types of Testing
  2. Test Driven Development
  3. React Testing Library's Principle.

Types of Software Testing

There are many types of software testing and we can't discuss it all in this short article. We will only discuss some of them that is widely used, especially in web development :

1. Unit Test
Unit Test is when we test one unit of code, to see if it works as expected. It is done in isolation, which means testing one specific part without interacting with other part of the app.

2. Integration Test
Integration Test is done by testing how multiple units of code work together, to see if the interaction between units act as intended.

3. Functional Test
Also called Behavioral Test. In this type of test, we test a particular behavior of software by taking in mind the user flow. In another word, we mimic how the user will interact with our app and then test if the results are as expected. We will expand on this type of test later when we talk about philosophy of RTL.

4. Acceptance / End to End Test
Also called E2E Test. This type of test use actual browser and server, because it also tests the flow of data from server to browser. Commonly used library in E2E Test is Cypress and Selenium.

Test Driven Development (TDD)

TDD

When we hear testing at first, what comes to mind is we write code, then we test it afterwards to see if it works as it should. TDD is the reverse of that. It is basically a software development type where we write our tests first before we write our code. Here is simple flow in TDD :

write test ⇒ test fail ⇒ write code ⇒ test pass

While it seems to add more work for us developers, TDD actually has some huge benefits for development teams, some of them are :

  • Better code quality since its spec is clear before writing
  • Easier to maintain the codebase
  • Refactoring become smoother

You can refer to this article to if you want to know about them in more detail.

React Testing Library's Principle

RTL, or more precisely, Testing Library in general is an opinionated library, which means it has set of principles they recommend developers to follow. Its main principle is this :

The more your tests resemble the way your software is used, the more confidence they can give you.

In other words, to test the software by the way user will use the app, not just as internal code implementation. That means, Testing Library encourages us to do functional testing, which I covered above, as opposed to doing unit testing. That's why, in future test examples, we will try to do functional tests and little of unit tests .

But that does not mean unit testing is bad and functional tests are good. Not at all. Each has own best use cases. For example, unit tests are good for complex utility functions that being used in many place, to ensure they are bug-free even in edge cases.

Summary

  • There are several types of testing. The most important ones to understand if you just started in testing are unit tests, that test code in isolation and functional tests, which test by how the user would interact with the app.
  • Test Driven Development (TDD) is software development type where developers write tests first before they actually write the code that will pass those tests. It has several awesome benefits
  • Testing Library has set of principles, and one of them is encouraging usage of functional tests that mimic user behavior closely, as opposed to just internal code implementations

That's it folks. Thanks for reading. See you in the next part of the series.

Happy coding !

Sources :

https://www.testim.io/blog/front-end-testing-complete-overview/
https://testing-library.com/docs/guiding-principles
https://fortegrp.com/test-driven-development-benefits/

Top comments (0)