Simple and complete React DOM testing utilities

February 25, 2019 0 Comments

Simple and complete React DOM testing utilities



Simple and complete React DOM testing utilities

Simple and complete React DOM testing utilities that encourage good testing practices.

The problem

You want to write maintainable tests for your React components. As a part of this goal, you want your tests to avoid including implementation details of your components and rather focus on making your tests give you the confidence for which they are intended. As part of this, you want your testbase to be maintainable in the long run so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and

your team down.

This solution

The react-testing-library is a very light-weight solution for testing React
components. It provides light utility functions on top of react-dom and
react-dom/test-utils, in a way that encourages better testing practices. Its
primary guiding principle is:

[The more your tests resemble the way your software is used, the more
confidence they can give you.][guiding-principle]


// __tests__/fetch.js
import React from 'react'
import {render, fireEvent, cleanup, waitForElement} from 'react-testing-library'
// this adds custom jest matchers from jest-dom
import 'jest-dom/extend-expect' // the mock lives in a __mocks__ directory
// to know more about manual mocks, access:
import axiosMock from 'axios'
import Fetch from '../fetch' // see the tests for a full implementation // automatically unmount and cleanup DOM after the test is finished.
afterEach(cleanup) test('Fetch makes an API call and displays the greeting when load-greeting is clicked', async () => { // Arrange axiosMock.get.mockResolvedValueOnce({data: {greeting: 'hello there'}}) const url = '/greeting' const {getByText, getByTestId, container, asFragment} = render( <Fetch url={url} />, ) // Act greeting/i)) // Let's wait until our mocked `get` request promise resolves and // the component calls setState and re-renders. // getByTestId throws an error if it cannot find an element with the given ID // and waitForElement will wait until the callback doesn't throw an error const greetingTextNode = await waitForElement(() => getByTestId('greeting-text'), ) // Assert expect(axiosMock.get).toHaveBeenCalledTimes(1) expect(axiosMock.get).toHaveBeenCalledWith(url) expect(getByTestId('greeting-text')).toHaveTextContent('hello there') expect(getByTestId('ok-button')).toHaveAttribute('disabled') // snapshots work great with regular DOM nodes! expect(container.firstChild).toMatchSnapshot() // you can also use get a `DocumentFragment`, which is useful if you want to compare nodes across render expect(asFragment()).toMatchSnapshot()


Tag cloud