Hi there, welcome back! Thank you for stopping by. Last month in my Getting Started with AWS article I wrote:

“_ If you are a budding developer looking to get that first opportunity, it is important to get familiar with some of the different cloud infrastructure providers out there. _”

The exact same can be said for writing tests for your code and the Testing Frameworks and libraries that help you do it. In this article, we will walk through setting up some unit tests with [jest](https://jestjs.io/) and [react-testing-librar](https://testing-library.com/docs/react-testing-library/intro)``y for some components in an existing React application.

What is Jest?

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

It works with projects using: Babel, TypeScript, Node, React, Angular, Vue, and more!

What is React Testing Library?

The _React Testing Library_ is a very light-weight solution for testing React components. It provides light utility functions on top of _react-dom_ and _react-dom/test-utils_, in a way that encourages better testing practices. Its primary guiding principle is:

The more your tests resemble the way your software is used, the more confidence they can give you.

So rather than dealing with instances of rendered React components, your tests will work with actual DOM nodes. The utilities this library provides facilitate querying the DOM in the same way the user would.

Let’s get started!

---

The Application

For this example, we have a simple SPA bootstrapped using the create-react-app your-apps-name command. The app has 2 simple components, a counter with “up” and “down” buttons. Clicking them increases and decreases the count displayed on the screen. The other component is a basic form with a submit button. Filling the form and clicking submit will display the message typed in the form.

When you create projects using the[Create React App](https://create-react-app.dev/) command, you have out of the box support for React Testing Library and Jest. If you didn’t use that command, you can add them via npm like so:

// Install React Testing Library
npm install --save-dev @testing-library/react

// Install Jest
npm install --save -dev jest

The Components:

As mentioned, our first component is the Counter component.

As you can see, it is a very simple component that manages state locally with the [useState](https://reactjs.org/docs/hooks-state.html) hook(line 5 and 6). It has a single arrow function called handleClick (line 8) that manages both button clicks with some conditional statements. It also removes the element from the screen based on a nested conditional statements(line 17).

Our second component is the Printer component.

This component has a bit more going on. Again, we manage all our state attributes with the useState hook(lines 4 – 7). In this case, we have a handleChange arrow function (line 9) that manages input changes on the form when the user is typing in the input field. Finally, we have a handleClick arrow function (line 13) that triggers all our state changes. Also, this component disables the “Print” button if there is no data in the input field.

#unit-testing #react-testing-library #jest #react #javascript