Scribd
Upload
207 views

Documentation For React Testing

This document provides an overview of React Testing Library, a tool for testing React components. It discusses how to set up testing with React Testing Library and Jest, write tests to check for DOM elements and user interactions, mock API calls and external libraries. Key points covered include finding elements by attributes, simulating user events like clicks, mocking API requests, and mocking libraries like React Router.

Uploaded by

VIPIN SHARMA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
207 views

Documentation For React Testing

This document provides an overview of React Testing Library, a tool for testing React components. It discusses how to set up testing with React Testing Library and Jest, write tests to check for DOM elements and user interactions, mock API calls and external libraries. Key points covered include finding elements by attributes, simulating user events like clicks, mocking API requests, and mocking libraries like React Router.

Uploaded by

VIPIN SHARMA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Documentation For React Testing

The library that we use in our React Boilerplate is


react-testing-library,jest.

React Testing Library is a testing utility tool that is built to test the actual DOM
tree rendered by React on the browser.The motive of the library is to help you
write test cases that resemble how a user would use your application.Thus this
library gives you more trust that you application works as expected when an
actual user uses it.

So basically this library provides some utility methods which will query the DOM
in the exact same manner as a user would.Just to define it in one example → If a
user wants to save his/her work, he/she would find ‘Save’ button by its text,
similarly react-testing-library provides utility function ‘getByText()’ which will help
you find that text.

How to use React Testing Library?

So basically a React Application which is created with Create React App already
includes React Testing Library and Jest by default.So you just need to write your
code for testing.Also you would require Jest because React Testing Library just
provides methods to help you write the test scripts.But you still need a Javascript
test framework to run the test code for which Jest is used.

So you need to create tests folder for every component.In that you need to create
your file in this manner → [filename].test.js

Inside filename.test.js

describe('<Renders Learn React Link />', () => {


it('should render Learn React Text', async () => {
const { getByText } = render(
<FileName />
);
expect(getByText(‘Learn React’)).toBeInTheDocument();
});
})

So the code above uses render method to virtually render the FileName
component imported from FileName.js and appends it to the document.body
Node.It will search for Learn React text and check whether it is available in the
document or not with the expect method from Jest.

React Testing Library Methods For Finding Elements:

● getByText(): find the element by its textContent value

● getByRole(): by its role attribute value


● getByLabelText(): by its label attribute value
● getByPlaceholderText(): by its placeholder attribute value
● getByAltText(): by its alt attribute value
● getByDisplayValue(): by its value attribute, usually for <input> elements
● getByTitle(): by its title attribute value
● getByTestId(): by its data-test-id value
How to Test User Generated Events By React Testing
Library:

Apart from finding whether or not the elements are present in the document
body, React Testing Library also helps to test user generated events like clicking a
button and typing values into a textbox.So we have to replicate user behaviour in
our testcases.

ProfileForm Component:

import React from 'react';

import {Button} from 'antd';

function ProfileForm() {

return (

<div>

<Button data-testid="profile-submit">Submit</Button>

</div>

export default ProfileForm;


→ profileForm.test.js

import { fireEvent, render } from 'react-testing-library';

import ProfileForm from ./ProfileForm;

describe('<Clicks on Submit Button />', () => {


it('Should click on submit button', () => {
const { getByTestId } = render(<ProfileForm />);

fireEvent.click(getByTestId('profile-submit'));

});

});

So the above component renders ProfileForm component.Then we are using the


method provided by react testing library which is getByTestId().So from the DOM
it will find out the testid given to that button by using data-testid
.i.e.profile-submit will be searched and once that is found it will click on it by
fireEvent.click where fireEvent is a part of react testing library.So this is how you’ll
be able to click Button.
How To Test API Calls:

import request from 'utils/request';

beforeEach(() => {

request.mockImplementation(() => Promise.resolve(dummyResponse));

});

This is how you will be mocking API.You will mock it by


request.mockImplementation.And it will resolve promise and inside that it will resolve
the dummy api response.This is how you can mock your API call.
How To Mock External Libraries:

jest.mock('utils/request');

jest.mock('react-router-dom', () => ({

...jest.requireActual('react-router-dom'),

version: '^5.2.0',

useHistory: () => ({

push: jest.fn(),

}),

}));

Before starting to write testcases you need to mock external libraries just like we
mocked useHistory over here.

Refer React Boilerplate for more testcases reference…

You might also like