Write better unit tests

Inflatable pool accessories
Photo by Toni Cuenca on Unsplash.

Note: This article assumes a basic understanding of Jest and the React Testing Library. If you are not familiar with the general testing structure of React, I recommend starting with this series.

Mocking is a core tenet of unit-testing a React application. It is a key tool for following RTL’s best practice of not testing implementation details, as well as the fundamental idea of isolation in all unit testing.

The Jest documentation covers an assortment of methods for mocking and several very helpful use cases. But what it’s missing is a basic overview of what you are doing when mocking…


Photo by Heather Barnes on Unsplash

In the process of building a user interface, handling unexpected behaviors is equally important to handling expected behaviors. Even with all of the testing in the world, someone, somewhere, will (accidentally) figure out how to break your app. Even the most reliable network will, at some point, fail.

While it may be impossible to anticipate and evade every single possibility of this, we can acknowledge that it will happen in a broad sense.

The elegant handling of these occurrences in broad strokes is imperative to a positive user experience.

Unhandled JavaScript Errors


Photo by Esther Jiao on Unsplash

Modern code would be largely untenable without inheritance, which “allows programmers to create classes that are built upon existing classes”. It is a cornerstone of object-oriented programming. While React in many ways leverages traditional object-oriented practices, JSX and its overall structure create divergences from traditional composition. For instance, we don’t create a new instance of a class by calling the traditional constructor:

new Component();

But rather creating a JSX representation of the class, as a React component:

<Component />

The Problem

Those problems that are otherwise solved by inheritance are still present in React apps, but made trickier because of these differences…


And how to think about the world as a newly minted engineer

Tables and chairs at a cafe
Photo by Al ghazali on Unsplash

There is no magic sequence of steps to getting a job. I have no singular secret to guarantee an offer. I have, however, spent ample time both assessing this very question during my own job search and reflecting on it after the fact.

My LinkedIn inbox is consistently pinged with requests from recent graduates to discuss my journey, which I am always happy to do. The way that I see it, people did this for me when I was starting out, and we all have a responsibility to pay kindness forward. …


Photo by Martin Reisch on Unsplash

This article is part of a series on testing in React:

Testing In React, Part 1: Types & Tools

Testing In React, Part 2: React Testing Library

Testing in React, Part 3: Jest & Jest-Dom

Testing in React, Part 4: Enzyme

Testing in React, Part 5: End-to-End Testing with Cypress

Testing in React, Part 6: Real-World Testing with React Testing Library, Jest, Enzyme and Cypress

At this point in the series, I hope you have a high level understanding of the different tools, the roles that they play, the differences between types of testing, and the importance of a comprehensive…


Photo by Mick Haupt on Unsplash

This article is part of a series on testing in React:

Testing In React, Part 1: Types & Tools

Testing In React, Part 2: React Testing Library

Testing in React, Part 3: Jest & Jest-Dom

Testing in React, Part 4: Enzyme

Testing in React, Part 5: End-to-End Testing with Cypress

Testing in React, Part 6: Real-World Testing with React Testing Library, Jest, Enzyme and Cypress

In contrast to testing rendered components (such as with React Testing Library, Enzyme, and Jest), end-to-end testing tests the entire workflow of a web application, from start to finish. This is where Cypress comes in…


Photo by Rodion Kutsaev on Unsplash

This article is part of a series on testing in React:

Testing In React, Part 1: Types & Tools

Testing In React, Part 2: React Testing Library

Testing in React, Part 3: Jest & Jest-Dom

Testing in React, Part 4: Enzyme

Testing in React, Part 5: End-to-End Testing with Cypress

Testing in React, Part 6: Real-World Testing with React Testing Library, Jest, Enzyme and Cypress

I know I said we weren’t going to cover Enzyme — but surprise! We are. While I understand the intention behind testing the user experience produced by code rather than the actual code implementation, the…


Photo by Angelina Litvin on Unsplash

This article is part of a series on testing in React:

Testing In React, Part 1: Types & Tools

Testing In React, Part 2: React Testing Library

Testing in React, Part 3: Jest & Jest-Dom

Testing in React, Part 4: Enzyme

Testing in React, Part 5: End-to-End Testing with Cypress

Testing in React, Part 6: Real-World Testing with React Testing Library, Jest, Enzyme and Cypress

It is painfully easy to get away with writing frontend code sans formal tests. Unlike backend programming, you are naturally “testing” your frontend application continuously throughout development just by interacting with the user interface. If…

Bryn Bennett

Full stack engineer at Stealth Startup // Writer // Ex-Music Manager // Dog mom // Tree People volunteer // codedependent.co 🏳️‍🌈

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