Testing Components in React Native
Understand how to test components in React Native using Jest
Testing could be one of the most daunting tasks that a programmer should do. It is because that testing requires one to be creative in covering all of the cases that could happen in the program. In this article, I’m going to discuss testing components in React Native using the Jest library.
Testing with Jest
The test that is run by Jest covers several things; it covers, statements, branches (conditionals), functions, and lines. The convenient thing in using Jest is that it also tells you which part of the code you haven’t covered yet
Writing the test
For this article, I’m going to use the Main Button component from my group project. The code for the component is as below.
As you have seen, in every building component, there is a property called testID. This property is going to be used by Jest to check whether the individual component could be covered by the test or not. It is a must for you to add this property to your building component so that your code could be tested.
In testing with Jest, you have to create a typescript file with a test extension before. As an example, the file of the name should be TestFile.test.tsx. For the sake of simplicity, I created a test file called MainButton.test.tsx to make it easier for my teammates to understand what will the test contain.
At the beginning of the test file, we need to import several libraries, namely React, Jest, and the component that is going to be tested. We also need to import cleanup, render, and fireEvent from Jest; each has its own purpose. It is important that you clean up after running each test so that you can restart the component.
I like to create a component wrapper first because it helps us to modify the properties of the component that is going to be used, making it easy for us to check the use cases for this component.
After everything has been set up, it is time to write the test. In front-end testing, we check whether the component is rendered correctly or not. There is a term called describe and it in Jest testing. describe explains what the test is about and it describes what the test case that it runs is about.
As with everything, we start with the main path first. The main path is the most basic form of the component; most of the time, is without any properties added.
Next, when the main path is covered, we test the conditionals. For this, you need to be creative enough on how to get the test working for the specified condition.
If your program has an onPress function, you need to use the fireEvent function. What it does is that it mocks the onPress function so that the program would think that it is being pressed, even though it’s not.
Finally, after you have completed it, you have to combine the snippets that you have created; such as above, for example, to create the test.
Running the test
Running the test couldn’t be simpler. You just have to run yarn test to run the tests that you have created in your command prompt. Keep in mind that it tests all files that have the .test extension. After you have executed the program, you can see the information about the test during that period. You can analyze how many tests are successful and how many tests failed.
After that, you can see the corresponding file details above it. You can see the details of your test regarding the percentage of each aspect and also the lines that you haven’t covered. Then, you are finished after you have your desired result!
Conclusions
It may be daunting at first when you are starting to write a test for your code. Writing a test shouldn’t be scary or hard as long as you know what to do and how your code works. If you have mastered and understand your own code, it will be really exciting to do it!
