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…

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

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…

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. …

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…

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…

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…

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

Thus far in this series, we have covered the various types of testing and tools for React, and one of the most popular testing libraries, React Testing Library. If you have not read these, I…