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

• Write basic unit test cases
• Check a Checkbox field
• Test button click event

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

Output - Test an input field using the React Testing Library - Clue Mediator

Test an input field using the React Testing Library

1. Create a sample react app
2. Write a test cases
3. Output

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.

App.js

import { useState } from 'react';
import './App.css';

function App() {
  const [email, setEmail] = useState('');
  return (
    <div class="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 class="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.

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 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");
    userEvent.type(inputEl, "[email protected]");

    expect(screen.getByTestId("email-input")).toHaveValue("[email protected]");
    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.");
  });

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

3. Output

Run the following command to test the cases.

npm test

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository