Learning React Test-Driven-Development: Login Form Tutorial Part II

React Test-Driven-Development Journey/Tutorial for Beginners

Hi all! This blog is meant to fill out my blog tutorial workout from last week. Join me in this part two of the Learning React Test-Driven Development Tutorial, and we will continue to dive deeper into Test-Driven-Development. Along the way, we will add more tests and more functionality to capture the state within our React Login Form app.

Photo by Alex Presa on Unsplash

If you are just stumbling upon Part II of my tutorial walkthrough, please click on this link to find the first part of this blog.

Without further ado, here goes!

Step 1. In LoginForm.test.js, add another test on line 17, This test should cover the rest of the functionality, which is to allow for users to submit their credentials. It will look something like this:

Be sure to add to import the userEvent from user-event library, this line of code is:

Import userEvent from ‘@testing-library/user-event’

The overall code in LoginForm.test.js should now look like this:

Step 2. Pass in {submit} props to LoginForm.js file, and pair it with a submit handler function to capture the submit event. Then pass that submit handler into the onSubmit form. Pay attention to Line 16 from the photo below, add that handleSubmit() function, and then pass it to the form on line 22.

Step 3. Inside of LoginForm.js set up useState functionality. On Line 4, or on the first line inside of your LoginForm setup useState (imported on Line 1) to capture the values of username and password with this line of code:

username and password are set to empty as their default state values

Step 4. Create an event handler function for the input boxes of our form. Let’s call this event handler, handleChange(). In the LoginForm.js HTML being returned (should be around Line 24, & Line 27)add the onChange event to each input and set each onChange to our event handleChange() event handler that needs to be built out. The handleChangle() function should look like this:

pass in the event, utilizing useState hook, make setValues equal to a copy of our initial state value being passed in (…value) and then set the new captured input as the updated setValues.

In the HTML, for each input of the form be sure to add a value inside of the input tag. For the username, it should look like this value={values.username}, and for the password input, it should like this value-Pvalues.password. See my screenshot below as a reference for writing out the full code for the HTML of LoginForm.js in this step.

At this point refer to the photo from Step 2, as to how your code should look overall in LoginForm.js.

Voila, both of our tests are passing now!

Conclusion

I learned so much from spending the time to built-in tests into this basic LoginForm app. My goal is to begin to integrate building testing in future apps I build out. Hopefully, for you, this basic tutorial walkthrough shed some light on how to go about adding in testing as you create your react apps. Thanks for reading, & happy hacking!