React Testing with UserEvent and Testing Library

In this blog, we will learn how to test a React application using the userEvent and testing-library. We will test a UserForm component that has two input fields for a username and email and a submit button. We will test the input fields and the submit button."

*tags: ["React", "Testing", "userEvent", "testing-library"] *
In this blog, we will learn how to test a React application using the userEvent and testing-library. We will test a UserForm component that has two input fields for a username and email and a submit button. We will test the input fields and the submit button.

---

First, let's import the necessary libraries and components
:

Next, let's write a test to check the rendering of the UserForm component:

test('renders UserForm component', () => {
     render(<UserForm />);
     const button = screen.getByText('Submit');
     expect(button).toBeInTheDocument();
     });

Now, let's write a test to check the input fields and the submit button:

test('test using data-testid', () => {
     const  handleUserAdd = jest.fn();
     render(<UserForm onUserAdd={handleUserAdd} />);
     const username = screen.getByTestId('username');
     const email = screen.getByTestId('email');
      fireEvent.change(username, { target: { value: 'Atik' } });
      fireEvent.change(email, { target: { value: '[e-mail]' } });
      expect(username.value).toBe('Atik');
      expect(email.value).toBe('[e-mail]');
      const submit = screen.getByRole('button');
      fireEvent.click(submit);
       expect(handleUserAdd).toHaveBeenCalledTimes(1);
     });

In the above test, we first render the UserForm component and then get the username and email input fields using their test-ids. We simulate typing in the fields and then click the submit button. We check if the onUserAdd function has been called once.

Finally, let's write another test using keyboard and click:

test('test using keyboard and click', () => {
  const handleUserAdd = jest.fn();
  render(<UserForm onUserAdd={handleUserAdd} />);

  //Find the tow inputs
  const [nameInput, emailInput] = screen.getAllByRole('textbox');

  //simulate typng in a name
  userEvent.click(nameInput);
  userEvent.keyboard('Rahman');

  //simulate typing in an email

  userEvent.click(emailInput);
  userEvent.keyboard('[e-mail]');

  //Find the submit button
  const submitButton = screen.getByText('Submit');
  userEvent.click(submitButton);

  expect(handleUserAdd).toHaveBeenCalledTimes(1);
});

In this test, we use the userEvent library to simulate user interactions. We first click on the name input field and then type 'Rahman' using the keyboard method. We do the same for the email input field. After typing, we click the submit button. We check if the onUserAdd function has been called once.

In conclusion, we have successfully tested a React application using the userEvent and testing-library. We tested the input fields and the submit button of a UserForm component.