Unit testing with react-testing-library

This is a simple example but it will explain how the testing library works.

You can install react-testing-library by running

 npm i @testing-library/react 

or you can just run

npx create-react-app 

to create a new React project, and you will have the library already installed.

This is our Button component:

import React, { useState } from "react"; export default function Button(){ const [clicked,isClicked]= useState(false); return( <> <button style={{background: clicked ? 'red' : 'green'}} onClick={e => isClicked(true)} data-testid="btn"> {clicked ? 'Clicked' : 'Click'} </button> </> ) } 

Give the button a data-testid="btn", so we can access it later from the test file.

Now the test file:

First we have to import render and fireEvent.

render - to render into a container which is appended to document.body.

fireEvent- fire a DOM event.

Then we import the component we want to render.

import { render, fireEvent } from "@testing-library/react"; import Button from "./Button.js"; 

We use the beforeEach method to render components, elements, methods or something else before each test.

First we render the Button component, then we get the btn element by data-test-id.

let btn; beforeEach(()=>{ //execute before each test const component = render(<Button />); // render Button component btn = component.queryByTestId('btn'); // get the btn element from Button }); 

Each test has two arguments, a description of the test and a function.

1.Test
We are checking if the element btn exists.

test('Check if btn is rendering correctly',()=>{ expect(btn).toBeTruthy(); //check if btn exists in the component }); 

2.Test
We are checking if the button is changing it's background color on click. First we check if button has 'background: green' on render, then we fire a click event , and expect the button to have 'background: red';

test("Check if btn is changing it's color from green to red on click",()=>{ expect(btn).toHaveStyle('background: green'); // btn has the style of 'background:green' fireEvent.click(btn); // btn is clicked expect(btn).toHaveStyle('background: red'); //btn has the style of 'background:red' }) 

3. Test
We are checking if the text in button is changing on click.
First we check if the button's text-content is 'Click', then we fire a click event, and we expect the text-content to be 'Clicked'.

test("Check if btn says Clicked after it's clicked",()=>{ expect(btn.textContent).toBe('Click'); fireEvent.click(btn); expect(btn.textContent).toBe('Clicked'); }) 

Then we run

npm test 

And if everything works fine, and all the test pass, we will see this: