Are you writing test for the first time? This might help.

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 tests are written to catch issues during development. Their purpose is to help write more maintainable code. For instance, if you are working on a project with other developers, it is wise to write tests to monitor 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 form of written tests, among others, are regression test and integration test; to test how different part of the application works together.

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
• Mocha + JSDOM

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 inside this test.

React testing Library

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. You can test cases such as when a form is filled, when a button is pressed, or if this button is disabled while the form is loading.

I hope I have clarified testing if you are doing it for the first, or second or You still do not get the concept of testing and testing on React Js.

Thanks for reading.