Custom rendering in React Testing Library Done Right

Matan Borenkraout
Apr 12, 2020 · 2 min read

Browsing multiple projects, I encountered a recurring pattern when trying to write a custom render for components that use Providers (React-Redux’s Provider, React-Intl’s IntlProvider for example).
This pattern usually looks like this:

renderWithRedux example, it’s a bad practice

This function is nice. It creates a utility that lets us call it whenever we want to test a connected component. The only problem is, it’s limited and causes an inconsistent behavior.
Usually, our app will work with several Providers, not only one, and this solution becomes squeaky when we try to add more Providers to it.
Another thing is that using it will cause inconsistency since we will call renderWithRedux every time instead of calling render as we usually do and we will also import the renderWithRedux from our test-utils file and all the other RTL utils like screen and fireEvent from @testing-library/react.
We will probably get something like this:

Importing from both places creates inconsistency
Importing from both places creates inconsistency

To fix this, React Testing Library lets us create a custom render function.
I have to be clear. This functionality isn’t new, it’s just not well known or used (in most of the projects I’ve seen lately).
To create a custom render function, we don’t have to work hard.

Full blown custom render function
Full blown custom render function

By doing this, we’ve created a function that uses the Wrapper option of RTL’s render. On top of it all, we also exported all the other functionalities so now we can import our render function and all the other React Testing Library functionality (fireEvent , screen etc.) from the same place.

Let’s take an example of a simple connected, translated, styled date component (This is an imaginary use case 😅):

A test using the custom render we built
A test using the custom render we built

We can see that I imported render and screen from our test utils, and this test is actually using all of our Providers: ThemeProvider, React-Redux’s Provider and IntlProvider.

That’s it! I hope I made everything clear.
If you have any questions, feel free to ask.
I’m here and also on twitter.
Thanks for reading!

Nielsen-Tel-Aviv-tech-blog

A publication by the Nielsen Tel Aviv Engineering team…

Matan Borenkraout

Written by

Frontend Engineer | Creating better software, one word at a time | Matan.io

Nielsen-Tel-Aviv-tech-blog

A publication by the Nielsen Tel Aviv Engineering team, where we talk about what we do and how we do things

Matan Borenkraout

Written by

Frontend Engineer | Creating better software, one word at a time | Matan.io

Nielsen-Tel-Aviv-tech-blog

A publication by the Nielsen Tel Aviv Engineering team, where we talk about what we do and how we do things

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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