It can be a daunting task to write tests when you do not even know what to test for or why you are testing. In this article, I will attempt to answer these three questions:
Why am I writing tests?
What am I testing for?
How do I write tests in ReactJs?
Why am I writing tests?
I still remember the confusion I felt when testing became mandatory at one of my previous engagements. The first question I asked, in protest, was: “Why am I testing on the front end?!”
Good question.
Can’t I open the browser and test manually? Why do I need to write tests? And what Am I even testing for?
These kinds of tests are written to catch issues during development. Its purpose is to help write more maintainable code. A case study would be if you are working on a project with other developers, it is wise to write tests to watch and check how changes in code affect other functions dependent on the changed functions. This also applies when you are writing the code to ensure that you catch other use cases you have not prepared for while working on your code.
What am I testing for?
So let’s write a function that takes two parameters and based on those two parameters returns a statement.
This is a simple function that returns a statement about the name and age passed into the function. What could be wrong with this code?
Well, what happens if, for some strange reason, name and age are not passed into this function, what would happen?
it will return my name is undefined and I am undefined years old. I know someone would notice the function is written in typescript, (Javascript with type). That should detect the error at build time, but what happens if the endpoint does not return the parameters you will use for this function? It will print something that was not intended to be printed. With tests, unintentional results can be caught in the ‘test coverage’. Once caught, you can adjust your functions to address these issues. In our case, we can handle this issue in our function:
The type of test written for single functions is called a unit test. You are testing the unit of test.
Other types of written tests can be to test navigating through the browser. Creating an environment similar to checking the application on a browser – those are for end-to-end testing.
How do I write tests in ReactJs?
The first thing to be decided is the environment that provides the DOM API. This is where the test will be run. For that, we have options in Javascript like:
Jest, for example, can run tests for our sample code.
Weird looking? You can consult the Jest documentation but let me break this down a little.
it(‘NAME_OF_TEST’, () => {}) can also be test(‘NAME_OF_TEST’, () => {}) which means you are testing the function in this test.
But to test your react components and hooks, you will need a DOM Testing Library.
A good DOM testing library for React is React testing library.
With this, you can test your react components like what happens when a form is filled when a button is pressed, or if this button is disabled when the form is loading.
I hope I have clarified testing if you are doing it for the first, and second or You still do not get the concept of testing and testing on React Js.
Thanks for reading.
