Weekly Webtips
Published in

Weekly Webtips

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

React Test-Driven-Development Journey/Tutorial for Beginners

Many apps have been made and conquered, but let’s get down to it and ask a real question here. Does your app include tests? Do you know how to implement tests? Having learned React from a coding school, I will say I have not yet stumbled upon building tests into my work yet. So, I thought you know what, no time like the present, let’s do this!

Photo by Scott Graham on Unsplash

Benefits of Test-Driven Development

Implementing test-driven development into our apps can ensure higher quality code, better program design, and can most definitely save projects costs in the long run.

Spending the time to implement tests into your app as you build, can help force you to consider what you really want from the code. Some other major benefits that stand out to me are you can identify errors and problems quickly, therefore, spending less time debugging!

React App Tutorial: Login Forms with Test-Driven Development

I decided to take a gander through YouTube tutorials and found this helpful React App Test Driven Development Tutorial for beginners! Join me on my journey and hopefully, we can learn something new together here.

Getting Started

Step One: To start off get your react app cooking with this code:

npx create-react-app app-name

Step Two

Implement testing libraries for your React App, React Testing Library, and React User Event Library.

Run these two lines of code in the terminal of your new app:

npm install — save-dev @testing-library/react

npm install — save-dev @testing-library/user-event @testing-library/dom

Step Three

Clean up the app: delete the extra files that the “create-react-app” build generated.

-delete App.test.js

Step Four

Create a new file for the LoginForm, and create a testing file for the LoginForm.

-in src folder create file: LoginForm.js

-in src folder create file: LoginForm.test.js

As of now, the structure of your app should look like this:

Step Five

Build out Login Form with HTML. See my React Component build out here & be sure to import your LoginForm into your App.js file.

LoginForm.js should resemble this:

useState we will implement in part 2 of the tutorial!

App.js with LoginForm imported:

Step Six

Implementing Tests for your LoginForm. In LoginForm.js begin by importing two things:

-import {render, screen} from “@testing-library/react”

-import LoginForm from “./LoginForm”

See here how to implement the test suite after the imports:

-initiate testing with “it” followed by whatever should be present for this test to render as true, in this example it “should have a username and a password field, also a submit button”

-inside of the it statement you need to render the component that the testing is connected to: <LoginForm />

-in the terminal run: npm test to see if you’re testing are passing. **

If you’re testing are passing it, your terminal should be displaying similarly to this:

CSS

CSS isn’t the name of the game for this tutorial, but it’s helpful to have what we’re building emulate the real world, so let’s get the HTML to align nicely by implementing these classes:

Also, don’t forget to add the button styling too:

At this point you’re app should be looking something like this:

Conclusion

Thanks for reading and hopefully you got your tests to run! For your reference here is the YouTube I learned how to build this from! Kudos to Marius Espejo, check out his YouTube channel! Thank you! Also here is my GitHub Repo to follow along with if you’d like.

In part two of my blog, I will implement using state into this Login Form App and building out that functionality. Cheers & Happy Hacking!

--

--

--

Explore the world of web technologies through a series of tutorials

Recommended from Medium

NextAuth Part 6— GitHub provider

How to Use MERN Stack: A Complete Guide

Introducing reactjs-popup 🎉 —React popup, Modals, Tooltips and Menus — All in one

5 HTML Tags You Probably Didn’t Know About

End to End(E2E) Tests in Angular Application Using Protractor

NextAuth.js Intro [3 of 3]: Adding Access Control

React vs Vue — A Quick Comparison (2020 Update)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alyssa E Easterly

Alyssa E Easterly

Software Engineer

More from Medium

How to render a DOM element into a React element?

Implementing Google Fonts into your React project using Styled Components

React Portals and Use-Cases

Everything you really need to know about React keys