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!
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:
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!
