May 20, 2021

Writing User Focused Tests with React Testing Library

Scottie

Scottie Crump

React Testing Library

Type

Topics

Industry

    Software engineering teams spend great time and energy building products that meet the needs of end-users. The last thing teams want to learn is that users are experiencing problems limiting or preventing them from using the software as intended. 

    How can we reduce these issues that can cost valuable time, money, and even the company’s reputation? In this post, you’ll learn about component testing using the React Testing Library and how this can help ensure that the applications you develop and send to production are designed to work as expected for users.

    Customer-Centricity Makes User Testing a Must

    An application requiring login is not accessible to users if clicking the “Login” button on the screen does not log the user into the site. 

    A web page with images that do not include “alt” tags prevents users with visual impairments requiring assistive technology such as screen readers from gaining the information necessary to understand the image’s purpose. 

    These are just two examples of issues that could be caught and remedied early with a robust testing process.

    Engineering teams must test rigorously before deploying to production for consumption by end-users. Staying customer-centric and implementing testing has been particularly challenging for many over the course of the Coronavirus pandemic, but it’s critical to get it right. 

    There are many types of testing, such as Black-box Testing, Performance Testing, or Security Testing. Let’s take a look at one that’s particularly useful in furthering your understanding of how users may interact with your product: Component Testing using React Testing Library. 

    What is React Testing Library?

    React Testing Library was created by Kent C. Dodds to test the User Interface (UI) of React applications. 

    The tool helps increase team confidence that applications will work as expected for end-users by encouraging testing practices that focus from end users’ perspectives (which is not always the case).

    For example, let’s say we wanted to test the following feedback form:

    react library testing

    Figure 1: Feedback Form 

    We could write the following instructions for a user to test the form manually:

    1. Enter a name in the “Name” input.
    2. Enter a valid email in the “Email” input.
    3. Enter comments into the “Comments” text area. 
    4. Click Submit.
    5. Verify that the name entered in the form is included in the text “Thanks for the feedback!”

    In the test code, we would need to select the various elements on the screen. We could select the different elements by their “ID” or “className” attributes. However, there are two problems with the previous approach. 

    The first problem is if the “ID” or “className” is changed, but not the functionality, the test will fail even though the behavior is still the same. 

    The second problem is that end-users would not select elements by the “ID” or “className,” so the test would not resemble how real users would navigate the application. 

    Writing a Test with React Testing Library

    Here’s how we could write a test with React Testing Library to fill out the form:

    test(‘Form, given valid submitted values, displays “thanks” message’, async () => {

      render(<App />)

      const fakeName = faker.name.firstName()

      const fakeEmail = faker.internet.email()

      const fakeComment = faker.lorem.sentence()

     

      user.type(screen.getByRole(‘textbox’, { name: /name/i }), fakeName)

      user.type(screen.getByRole(‘textbox’, { name: /email/i }), fakeEmail)

      user.type(screen.getByRole(‘textbox’, { name: /comments/i }), fakeComment)

      user.click(screen.getByRole(‘button’, { name: /submit/i }))

     

      const thanksMessage = await screen.findByRole(‘heading’, {

        name: `Thanks for the feedback ${fakeName}!`

      })

     

      expect(thanksMessage).toBeInTheDocument()

    })

     

    The test code used the implicit “role” and “name” attributes to select elements in the preceding code. The “role” attribute describes DOM elements’ role in ways accessible to all users, including those using assistive devices such as screen readers to navigate applications. 

    The approach used in the previous code provides more confidence the application will work for end users because it resembles how real users would navigate the application. 

    Summary

    Software engineering teams need to make testing their applications a high priority to reduce the occurrence of issues for end-users as much as possible, thus saving time and money for the business. 

    React Testing Library is an excellent addition to a testing strategy used to verify applications built with React. Please check out Testing Library to learn more about React Testing Library and other available tools. 

    Want to learn more?