How To Test Code in React
Andreia Melo, Frontend Developer
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?
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.
So what are the advantages of Jest?
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
React Testing Library
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.
Jest with React-Testing-Library: the winning combination
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.
Cypress: the E2E one
As for an E2E testing approach, another tool that is widely adopted by devs is Cypress.
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:
About the Author
Andreia Melo, Frontend Developer
I’ve been a frontend developer since 2017, specializing in the React ecosystem. In my spare time, I like to attend pub quiz events and learn new things. Other interests include Women in Tech, Animal Rights, and my two cats: Chu and Chibi.
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –