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

Ademola Onasoga — Sat, 06 Jul 2024 16:04:13 +0000

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, 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.

Handle form better in Nextjs with react-hook-form

Ademola Onasoga — Sun, 05 Jun 2022 01:08:47 +0000

On a regular tuesday afternoon, you attempted to implement a registration form with 3 field inputs, and for each field you need to have at least 1 validation. The most common approach to handle this would be with an Onchange function with a dash of Regular Expression. But as the form gets more complex with new set of validations and additional fields, you thought to yourself that there must be a better way to handle this. Alas! You were right all along.

In this article, we look at how to handle simple form data and validation with React-hook-form. Our case study is a registration form that collect users' information; first name, last name, email address, phone number and address.

We will validate each fields with at least one validation. For example, a mobile number field should not accept an email value or any letters for that matter. And this use case also assumes that names are not in numbers ( I know '2 pac' has a number, but let's limit the scope to only letters for name inputs). And if the fields are compulsory, it should not accept an empty value, the field must be filled.

Handling form using OnChange

As shown above, for every new fields introduced, there would be a need to keep adding a new state to handle it. So if we have, 14 fields in the form...you guessed it, 14 states.

I know some of you are thinking that this componenet can still be further broken down into container and stateless form, you are right. However, we are using it this way so that it can be easy to follow

Let's add validation with regEx

Validate that no fields cannot be empty

The form will be invalid if any of the fields are empty.

Now let's go a step futher by preventing the form from fulfilling if the value entered for first name or last name is a number or even has space in between the words. For that we will use a regular expression, also known as regEx. RegEx are patterns used to match character combination in strings. [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions]

We will define a regular expression for that validation:

We have added two validations for names, and we might need more; like the names should be at least three characters. And we have four other fields to validate deeper. This is looking like a lot of work. And what if, the form is longer and we are actually calling an API to submit the form, do we want the user to fill all the form before she realises all the checks. That would be frustration for the user.

React-hook-form to the rescue

Add React-hook-form in the follow steps:

npm install react-hook-form or yarn add react-hook-form if you use yarn.
Add import { useForm } from 'react-hook-form' to your file
Add const { handleSubmit, register } = useForm({mode: 'onChange')} to your component.

The handleSubmit works to submit the form, and the register works like the onChange. The mode, 'OnChange' means you want to form to be reactive in real time.

Just like that, you trim off all the useState and extra onChange collection away.

Can we handle some layer of validations using this package, of course.

Just pass your RegEx inside the pattern object in the register, the user is prevented from submitting her form if the fields are empty or the wrong patterns are entered.

Of couse, there are other form of validations to add to the form fileds and the form itself, eg preventing the form from been clickable.

For that we will add a new object in the useForm function, formState.

And we will add a disabled option to the button to disable the button unless all the fields are valid

Finally , we want to give the user a feedback in realtime of why the button is still disabled even when all fields are entered, it might be that the patterns entered are wrong. eg. '2 pac'. For that, we will need to add another item in the formState, errors.

Then add the feedback error message in the body of the form

Full form:

These is just few reason to consider using React-hook-form in your fo
rm management toolkit. And I will follow these articles up with other use cases.

DEV Community: Ademola Onasoga