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
Unit testing for a Checkbox using React Testing Library
1. Create a react application
Let’s create a startup react application using the create-react-app NPM package. Run the following command to create a react app.
1 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import { useState } from "react"; function App() { const [showElement, setShowElement] = useState(false); return ( <div classname="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 classname="container"> <label> <input type="checkbox" data-testid="cbShowHide" checked="{showElement}" onchange="{e" ==""> setShowElement(e.target.checked)} /> <span>Show/Hide Box</span> </label> {showElement && <div classname="box" data-testid="box">This is testing application.</div>} </div> </div> ); } export default App; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 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
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 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(); }); }); |
4. Output
Run the following command to test the cases.
1 | npm test |
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
