DEV Community

loading...
Cover image for Unit testing with react-testing-library

Unit testing with react-testing-library

danijelajs profile image Danijela.js๐Ÿ›ธ ใƒป2 min read

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
Enter fullscreen mode Exit fullscreen mode


or you can just run

npx create-react-app
Enter fullscreen mode Exit fullscreen mode


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>
        </>
    )
}
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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 
});
Enter fullscreen mode Exit fullscreen mode

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
});
Enter fullscreen mode Exit fullscreen mode

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'
 })

Enter fullscreen mode Exit fullscreen mode

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'); 
 })
Enter fullscreen mode Exit fullscreen mode

Then we run

npm test
Enter fullscreen mode Exit fullscreen mode

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

Discussion (3)

pic
Editor guide
Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Nice article! Havenโ€™t used it but looks like the approach is common with other testing suits.

Collapse
danijelajs profile image
Danijela.js๐Ÿ›ธ Author

Thanks. Yeah, I mean, it's a basic example. But I plan on writing some more complicated examples, and tutorials on this topic.

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Nice, I will wait to read them. Keep it up ๐Ÿ”ฅ