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 in how we write React code. For example, I recently was building a container that could render any one of several different charts. …

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

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 two are inextricably intertwined. …

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 recommend that you do so. …

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

The headline for React Testing Library is, “Test functionality, not implementation”. …

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 you add an onClick handler, you intuitively head to the browser to click on that component. …