Getting started with React Testing Library for unit testing

Getting started with React Testing Library for unit testing

=> Getting started with React Testing Library for unit testing

In this tutorial, we are going to learn what is React Testing Library and provide some context to the entire tutorial.

APIs of React Testing Library

We will look into the overview of apis of react testing library - render, cleanup, act

Render api of react testing library

In this tutorial, we will go through the get, query and find apis of the render method of the react testing library.

Getting started

There are two main unit testing library that help you easily test the component. These testing libraries are not required to test React components.
You can test the components without using these libraries as well. Go to below course to learn more on how to test without the help of any unit testing library.
You can read the above course later. Testing the components without any unit testing library is possible, but it is difficult. Once you understand that, you will appriciate the above testing libraries more.

What is React Testing library

React testing library does not offer radical or invent new apis to test react app. On the contrary, it offers less functionality than an Enzyme app. Then you would ask, why would you use a library that offers less than other library? Its because React testing library forces you to focus on one aspect of testing
React testing library forces you to not test the implementation of your React component. Rather, you test the component the way it is going to be used in the app.
If you have a list component, then only thing you would be concerned about from usage perspective is that you are going to pass some props to it, and you will get a list view. So you are going to test your list component in the same way. React testing library does not provide methods to test the internals of the component ie state or props.

Things to know

Following things would be helpful to know before we start writing unit test cases for our project.
React testing library is only a helper library for testing react components. Following diagram will make you more clear on the architecture of it.

Helper libraries and test framework
Helper libraries and test framework


So it means that you can use any helper library like enzyme or react testing library to write test cases in React. You are also free to choose your own testing framework like Jest, Ava or Karma or others.
It also means that you can skip using the testing helper libraries like enzyme and react testing libraries, and still write unit test case. Below is an example of testing for text present in an React component *without* using any helper library.

import React, { Component } from 'react';
class Sample extends Component{
  render(){
    return(<div className="sample">
      This is a sample component
    </div>)
  }
}

Test case for above component without using testing library or enzyme will be as follows

import React from 'react';
import ReactDOM from 'react-dom';
import Sample from '../sample';

describe('Sample', () => {
  it('should check for text', () => {
    const elem = document.createElement('div');
    ReactDOM.render(<Sample/>, elem);
    expect(elem.querySelector('.sample').textContent).toEqual('This is a sample component');
  })
})

So we created a element, and rendered the Sample component inside it using ReactDOM. Then we used dom matchers to find the text and assert using jest. Here we have not used React testing library or enzyme at all. Everything that you see other than React, is provided by jest. The `describe` and `it` blocks, matchers like `expect` are provided by Jest.

APIs of React Testing Library

React testing library provides the APIs to render the React component, and

Render API

Render API is frequently used API of React Testing Library. As the name suggests, the render API is used to render the component. It provides features like querying on the DOM.Render API is used to render the test component. It accepts the component as first argument and returns helper methods to test the component.

const wrapper = render(<Sample/>);

CopyThe wrapper object provides methods to easily test on the DOM, which can be used for assertion in the tests. Render API accepts another argument which controls the way we render the component.

const wrapper = render(<Sample/>, {
  // options here
})

Copydefault options are as follows

const wrapper = render(<Sample/>, {
  container: document.body.appendChild(document.createElement('div')),
  hydrate: false,
  wrapper: null,
  queries: <Queries from @testing-library/dom based on the baseElement>
})

The container is the wrapper that will contain the React Component. By default, its a body element with a div inside it as mentioned in the code above. If you specify a container explicitly, then the React Component will be inside that container.

This above render statement returns a wrapper, which can be used to query on the DOM. There are many helper apis provided like queryAllByText, queryAllByLabel, findAllByLabel and many more, which we will learn in detail in next sections below. These queries are run on the `baseElement`, which by default, is the body element. If you specify a custom element as container, then the baseElement will be that container.

Cleanup API

Unmounts React trees that were mounted with render. For testing frameworks such as Jest, this is done automatically in afterEach block. The testing framework that do not have such methods, this cleanup needs to be done manually.

Below is an example of ava test framework, which does not have the `afterEach` block. So here we have to do the cleanup ourselves as follows.

import { cleanup, render } from '@testing-library/react'
import test from 'ava'

test.afterEach(cleanup)

test('renders into document', () => {
  render(<div />)
  // ...
})

Act API

This is a light wrapper around the react-dom/test-utils act function. All it does is forward all arguments to the act function if your version of react supports act

Leave a Reply

%d bloggers like this: