Example
Full Example
See the following sections for a detailed breakdown of the test
// __tests__/fetch.test.js
import React from 'react'
import {
render,
fireEvent,
cleanup,
waitForElement,
} from '@testing-library/react'
import 'jest-dom/extend-expect'
import axiosMock from 'axios'
import Fetch from '../fetch'
afterEach(cleanup)
test('loads and displays greeting', async () => {
const url = '/greeting'
const { getByText, getByTestId } = render(<Fetch url={url} />)
axiosMock.get.mockResolvedValueOnce({
data: { greeting: 'hello there' },
})
fireEvent.click(getByText('Load Greeting'))
const greetingTextNode = await waitForElement(() =>
getByTestId('greeting-text')
)
expect(axiosMock.get).toHaveBeenCalledTimes(1)
expect(axiosMock.get).toHaveBeenCalledWith(url)
expect(getByTestId('greeting-text')).toHaveTextContent('hello there')
expect(getByTestId('ok-button')).toHaveAttribute('disabled')
})
Step-By-Step
Imports
// import dependencies
import React from 'react'
// import react-testing methods
import {
render,
fireEvent,
cleanup,
waitForElement,
} from '@testing-library/react'
// add custom jest matchers from jest-dom
import 'jest-dom/extend-expect'
// the axios mock is in __mocks__/
// see https://jestjs.io/docs/en/manual-mocks
import axiosMock from 'axios'
// the component to test
import Fetch from '../fetch'
// automatically unmount and cleanup DOM after the test is finished.
afterEach(cleanup)
test('loads and displays greeting', async () => {
// Arrange
// Act
// Assert
})
Arrange
The render
method renders a React element into the DOM and
returns utility functions for testing the component.
const url = '/greeting'
const { getByText, getByTestId, container, asFragment } = render(
<Fetch url={url} />
)
Act
The fireEvent
method allows you to fire
events to simulate user actions.
axiosMock.get.mockResolvedValueOnce({
data: { greeting: 'hello there' },
})
fireEvent.click(getByText('Load Greeting'))
// Wait until the mocked `get` request promise resolves and
// the component calls setState and re-renders.
// `waitForElement` waits until the callback doesn't throw an error
const greetingTextNode = await waitForElement(() =>
// getByTestId throws an error if it cannot find an element
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()