In Rui’s article, we learned all about the importance of testing code. But how do you make sure your React apps are thoroughly tested?

In React official docs two main contenders are presented as the go-to tools: Jest and React Testing Library. According to the State of Javascript survey of 2019, Jest is widely used with a whopping 96%, and React Testing Library (RTL) is also most commonly mentioned when referring to other testing tools in the freeform answers section.

Jest is officially described as “a JavaScript testing framework designed to ensure [the] correctness of any JavaScript codebase. It allows you to write tests with an approachable, familiar, and feature-rich API that gives you results quickly. Jest is well-documented, requires little configuration, and can be extended to match your requirements.” 

it’s a fully-featured testing framework that is normally used with testing libraries like Enzyme or RTL. It’s a test runner, if you will.

Compatibility: it’s compatible with Angular, React, Node, Vue, etc

Fast: it’s a very fast testing tool

Supports Typescript: it supports TypeScript through the ts-jest package

Snapshot testing: it ensures that your application’s UI does not change unexpectedly between releases

Timer mocks: you can manipulate time using : setTimeout() ; setInterval(); clearTimeout(); clearInterval();  and the jest.runAllTimers function as examples

You can write Jest tests to:

  • Test an isolated component and its public API
  • Test mimicked user behavior interaction
  • Verify the DOM output of a component
  • Verify that events fire when expected
  • Mock functions

As mentioned before, Jest is a fast testing framework. It requires minimal configuration and is simple to install. It’s considered a React-oriented test runner, but in reality, it’s compatible and easy to adapt for any JavaScript library or framework project.

As for RTL, their official documents refer to it as “a very lightweight solution for testing without all the implementation details. The main utilities it provides involve querying for nodes similarly to how users would find them. In this way, testing-library helps ensure your tests give you confidence in your UI code.” Their motto is that “the more your tests resemble the way your software is used, the more confidence they can give you.”

RTL has the end-user as the main focus, testing how they would use it by mimicking their behavior.

One of RTL’s main advantages is one of its guiding principles: functionality over implementation. It makes sense to think that the user doesn’t really care about whether your project makes use of hooks, just as long as your app works flawlessly when they use it.

RTL makes you write better components, both semantically and in terms of accessibility from an HTML point of view. The semantics are much less likely to change over time, giving you a more confident approach than CSS and ID-based selectors.

It’s worth mentioning that Jest and RTL are included in the create-react-app bundle (CRA), which makes it very easy to start your testing even if you are new to the React ecosystem.

Using both together creates a strong testing toolset to make sure your apps are thoroughly tested.

As for an E2E testing approach, another tool that is widely adopted by devs is Cypress. 

Cypress is a JavaScript test automation solution, which allows you to write tests that run in a browser. It can, for instance, test how your frontend is handling API calls/responses to the server or test the flow of the application.

Of course, there are other testing tools available, including Mocha, Chai, Karma, Jasmine, but they are being slowly adopted less and less by devs.

Also worth mentioning is Enzyme, which is another testing library still widely used with Jest. Enzyme allows you to update the state and props of the component, for example, which would definitely not be the way the user will interact with your app. This is a very different approach from RTL. 

This article is meant as a starting point to the complex world of testing, specially adapted to the React ecosystem. 

With Jest/RTL/Cypress as your testing tools, you can’t go wrong! You can ensure the quality and reliability of your code to make it bullet-proof, or at least user-proof. 

If you want to know more about this topic, I recommend the following: