Nowports Tech

    Unit testing with React Testing Library

    Diego Ponce García
    Jan 28 · 5 min read

    Writing code with no tests is like playing roulette with your client’s money.

    Let’s play a game where you always win.

    For this tutorial, I’ll be using the react-testing-library by Kent C. Dodds.


    We want to assure every time our app behaves as expected every time it runs. To do so, we need to test it.

    A test compares a received value with an expected result, where it can fail or pass. This gives us trust for our code and clarity to our users.

    Code coverage

    How much of our code is being tested?

    The more meaningful tests we do, the better. This is what good coverage looks like.

    As I said earlier, try to write meaningful tests: don’t test everything in your app, only what’s important. There is no magic number or percentage of what good coverage is, that is something you must define for your project, having over 70% of coverage is a nice goal.

    The testing pyramid

    There are three main levels of testing, I present to you the testing pyramid.

    Testing pyramid

    As you can see, unit testing is the fastest and cheapest way to begin testing our apps. Integration tests and UI tests are the next steps, manual testing is represented as a cloud because it can’t be measured, it often consists of doing console.log() or clicking the UI until something crashes.


    Let’s get started

    For this example, we’ll create a simple react project: a contact list that looks like this. The code for this example is here.

    Contact list project

    We’ll focus on testing the <Card /> component, which is every card containing our contact data. Here is the code.

    <Card /> component

    What should we test?

    Let’s think for a moment, what’s important to our users?

    Well, there are two main tests we should cover:

    • Does <Card /> render without crashing our app?
    • The toggle button to show and hide information works?

    Setup

    To get started:

    1. Create a __tests__ folder inside the src of our app (pretty much a standard).
    2. Create a card.test.js file inside the folder we just created. Everything with a *.test.js inside our app will be tested.

    Make sure you installed the react-testing-library.
    npm install — save-dev @testing-library/react

    3. Import needed files, our card.test.js file should look like this.

    Initial setup

    Writing our first test

    The following is the “Hello world” for testing in React. Let’s test if our component is being rendered.

    • [1–3] We import the render method from react-testing-library, we ask it to simulate rendering our <Card /> component.
    • [5] test receives two values, a string saying what our test is about and a function of what the test should do.
    • [6–7] Using getByTestId we can extract an HTML element and check if it contains a data-testid attribute. We previously added data-testid=”card” to the main wrapper of the <Card /> component.
    • [8] This is the key part of our test, expect is a Jest utility to compare our target and see if our test fails or passes. We expect our <div> to be defined in the DOM.
    • Run yarn test and… our test passed!

    There is so much more you can target with react testing library, make sure you check their docs to see everything it offers.

    Testing events

    Let’s test the toggle button.

    We want to make sure every time our toggle is being clicked it… well, toggles.

    First, we add a user object to be passed as props to our <Card /> component, like this:

    We’ll use the fireEvent utility so we import it:

    And we write our test:

    • [17] We target the button element in our DOM to use it later, using getByTestId.
    • [18] At first we expect our hidden container to be null because at this point it doesn’t exist.
    • [19] We use fireEvent to simulate a click on the Show/Hide details button.
    • [20] Now we do expect the container to ve visible and loaded in the DOM.

    Run yarn test and… it passes!

    This was just a little introduction on how to unit test react components, you can see the full project here.

    Thank you for reading, I hope this brief introduction helped you in some way to understand the testing process for React applications and apps in general.

    Nowports Tech

    This publication is going to be used by the Nowports Tech team to share knowledge with the industry.

    Diego Ponce García

    Written by

    Nowports Tech

    This publication is going to be used by the Nowports Tech team to share knowledge with the industry.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade