Check a Checkbox using React Testing Library

Today we’ll show you how to check a checkbox using React Testing Library.

In the previous article, we had learned about the normal test cases using React Testing Library. Here, we will write a test case for the checkbox type and for that we will create a simple react application to show/hide the div element.

Output: Unit Testing

Output - Check a Checkbox using React Testing Library - Clue Mediator

Unit testing for a Checkbox using React Testing Library

1. Create a react application
2. Create a toggle app
3. Write a test cases
4. Output

1. Create a react application

Let’s create a startup react application using the `create-react-app` React Package">NPM package. Run the following command to create a react app.

npx create-react-app test-checkbox-react-app

2. Create a toggle app

Now, we will create a toggle application, where we will add the `checkbox` input type and `div` elements on the page. Here, we will show/hide the div by selecting the checkbox input.

App.js

import { useState } from "react";

function App() {
  const [showElement, setShowElement] = useState(false);
  return (
    <div class="App">
      <h2>Check a Checkbox using<br>React Testing Library - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h2>
      <div class="container">
        <label>
          <input type="checkbox" data-testid="cbShowHide" checked onchange="{e" ==""> setShowElement(e.target.checked)} />
          <span>Show/Hide Box</span>
        </label>
        {showElement && <div class="box" data-testid="box">This is testing application.</div>}
      </div>
    </div>
  );
}

export default App;

index.css

body {
  margin: 20px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

.container {
  font-size: 18px;
}

.box {
  margin: 10px 0;
  border: 1px solid #ddd;
  padding: 10px;
  background: #f5f5f5;
}

Output

App Output - Check a Checkbox using React Testing Library - Clue Mediator

3. Write a test cases

We will test the following use case for the `App.js` component.

• render component

  Assert

  • The checkbox should be in the document
  • The checkbox should be unchecked by default
  • The box element should be hidden

• toggle element by selecting checkbox

  Assert

  • Execute the click event of the checkbox
  • The checkbox should be checked after the click
  • The box element should be visible
  • Execute the click event again
  • The checkbox should be unchecked
  • The box element should be hidden

Here we will use the @testing-library/user-event package to handle the click event.

App.test.js

import { render, screen } from '@testing-library/react';
import userEvent from "@testing-library/user-event";
import App from './App';

describe("<app>", () => {

  test('render component', () => {
    render(<app>);

    const cbEl = screen.getByTestId("cbShowHide");
    expect(cbEl).toBeInTheDocument();
    expect(cbEl).not.toBeChecked();

    expect(screen.queryByTestId("box")).not.toBeInTheDocument();
  });

  test('toggle element by selecting checkbox', () => {
    render(<app>);

    const cbEl = screen.getByTestId("cbShowHide");

    // Execute the click event of the checkbox
    userEvent.click(cbEl);
    expect(cbEl).toBeChecked();
    expect(screen.queryByTestId("box")).toBeInTheDocument();

    // Execute the click event again
    userEvent.click(cbEl);
    expect(cbEl).not.toBeChecked();
    expect(screen.queryByTestId("box")).not.toBeInTheDocument();
  });

});
</app></app></app>

4. Output

Run the following command to test the cases.

npm test

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository