Create a Great User Experience with React, TypeScript, and the React Testing Library

I'm always willing to learn, no matter how much I know. As a software engineer, my thirst for knowledge has increased a lot. I know that I have a lot of things to learn daily.

But before I could learn more, I wanted to master the fundamentals. To make myself a better developer, I wanted to understand more about how to create great product experiences.

This post is my attempt to illustrate a Proof of Concept (PoC) I built to try out some ideas.

I had some topics in mind for this project. It needed to:

Use high-quality software
Provide a great user experience
When I say high-quality software, this can mean so many different things. But I wanted to focus on three parts:

Clean Code: Strive to write human-readable code that is easy to read and simple to maintain. Separate responsibility for functions and components.
Good test coverage: It's actually not about coverage. It's about tests that cover important parts of components' behavior without knowing too much about implementation details.
Consistent state management: I wanted to build with software that enables the app to have consistent data. Predictability is important.
User experience was the main focus of this PoC. The software and techniques would be the foundation that enabled a good experience for users.

To make the state consistent, I wanted a type system. So I chose TypeScript. This was my first time using Typescript with React. This project also allowed me to build custom hooks and test it properly.

Setting up the project
I came across this library called tsdx that sets up all the Typescript configuration for you. It's mainly used to build packages. Since this was a simple side project, I didn't mind giving it a try.

After installing it, I chose the React template and I was ready to code. But before the fun part, I wanted to set up the test configuration too. I used the React Testing Library as the main library together with jest-dom to provide some awesome custom methods (I really like the toBeInTheDocument matcher).

With all that installed, I overwrote the jest config by adding a new jest.config.js:

And a setupTests.ts to import everything I needed.

In this case, I just had the jest-dom library to import. That way, I didn't need to import this package in my test files. Now it worked out of the box.

To test this installation and configuration, I built a simple component:

Now we are ready for the next step.