Test an input field using the React Testing Library
Today, we will show you how to test an input field using the React Testing Library. Here we will use the userEvent.type() method from the @testing-library/user-event npm package.
Checkout more articles on Testing Library
In this react article, we will create a component where we will add the email input field and handle the validation message based on the email value.
Demo Application
Test an input field using the React Testing Library
1. Create a sample react app
Let’s create a simple react application using the create-react-app and handle an email validation message based on the given input.
Look at the following component for the react 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 | import { useState } from 'react'; import './App.css'; function App() { const [email, setEmail] = useState(''); return ( <div className="App"> <h1>React Application</h1> <small>Powered By <a href="https://www.cluemediator.com/" target="_blank" title="Clue Mediator" data-testid="powered-by" rel="noopener noreferrer">Clue Mediator</a></small> <input type="email" placeholder="Enter email" data-testid="email-input" value={email} onChange={e => setEmail(e.target.value)} /> {email && !(/\S+@\S+\.\S+/).test(email) && <span className="error" data-testid="error-msg">Please enter a valid email.</span>} </div> ); } export default App; |
2. Write a test cases
Let’s test the following use cases for the above application.
render email input
Assert
- The input field should be in the document
- The input field should have a type email attribute
pass valid email to test email input field
Assert
- The input field have a valid given value
- The error message should not be in the document
pass invalid email to test input value
Assert
- The input field have an invalid given value
- The error message should be in the document
- The error message should contain “Please enter a valid email.” text
Here, we will use the userEvent from the @testing-library/user-event to type the text in the input field.
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 34 35 36 37 | import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import App from './App'; describe("<App />", () => { test('render email input', () => { render(<App />); const inputEl = screen.getByTestId("email-input"); expect(inputEl).toBeInTheDocument(); expect(inputEl).toHaveAttribute("type", "email"); }); test('pass valid email to test email input field', () => { render(<App />); const inputEl = screen.getByTestId("email-input"); expect(screen.queryByTestId("error-msg")).not.toBeInTheDocument(); }); test('pass invalid email to test input value', () => { render(<App />); const inputEl = screen.getByTestId("email-input"); userEvent.type(inputEl, "test"); expect(screen.getByTestId("email-input")).toHaveValue("test"); expect(screen.queryByTestId("error-msg")).toBeInTheDocument(); expect(screen.queryByTestId("error-msg").textContent).toEqual("Please enter a valid email."); }); }); |
3. Output
Run the following command to test the cases.
1 | npm test |
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂
