Unit testing with react-testing-library

#react #unittesting #reacttestinglibrary #testing

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