So far we’ve learned how to query and extract the different DOM nodes from our React components. Now, it’s time for us to learn how to mimic user interactions e.g. clicking a checkbox, typing text, etc. Once again, this entire process has been made easier for us with the help of another library in the @testing-library suite: @testing-library/user-event.

The library can be installed with the command below:

npm install --save-dev @testing-library/[email protected]

Note: There is a known issue with the userEvent.type() method that was resolved in issue 12.0.4. To avoid this issue, install version 12.0.4 of the package.

This library exports a single object, userEvent, that can imported in a test file like so:

import userEvent from '@testing-library/user-event';

The userEvent object contains many built-in methods that allow us to mimic user interactions. Typically, they follow the same syntax pattern:

userEvent.interactionType(nodeToInteractWith);

Here is an example where we mimic a user filling in a text box. Note that in this case, a second argument is provided as the text to be typed into the box.

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';

const GreetingForm = () => {
  return(
    <form>
      <label htmlFor="greeting">
        Greeting:
      </label>
      <input type="text" id="greeting" />
      <input type="submit" value="Submit" />
    </form>
  );
};

test('should show text content as Hey Mack!', () => {
  // Render the component to test
  render(<GreetingForm />);
  // Extract the textbox component
  const textbox = screen.getByRole('textbox');
  // Simulate typing 'Hey Mack!'
  userEvent.type(textbox, 'Hey Mack!');
  // Assert textbox has text content 'Hey Mack!'
  expect(textbox).toHaveValue('Hey Mack!');
});

In the example above, the userEvent.type() method is used which accepts a DOM node to interact with (textbox) and a string to type into that node (`’Hey Mack!’).

The userEvent object has methods for simulating clicks (userEvent.click()), hovering (userEvent.hover()), and much more. Once again, instead of memorizing all of these, it is recommended that you read the docs to find the method best suited for your needs.