Skip to main content

Testing Library: Testing User Interactions

In this tutorial, we will show you how to test user interactions in your web applications using the Testing Library and Jest.

Setting up Jest and Testing Library​

To set up Jest and Testing Library, follow these steps:

  1. Create a new project folder and navigate to it in your terminal.

  2. Initialize a new npm project with the following command:

npm init -y
  1. Install Jest, Testing Library, and associated dependencies with the following command:
npm install --save-dev jest @testing-library/dom @testing-library/user-event @testing-library/jest-dom
  1. Add a new test script to your package.json file:
"scripts": {
  "test": "jest"
}

Writing a simple DOM manipulation function with user interaction​

Create a new file called buttonClick.js in your project folder and add the following code:

function createButtonWithListener() {
  const button = document.createElement('button');
  button.textContent = 'Click me!';
  button.addEventListener('click', () => {
    button.textContent = 'Clicked!';
  });
  return button;
}

module.exports = createButtonWithListener;

This function creates a button element and adds a click event listener to it. When the button is clicked, its text content changes to "Clicked!".

Writing the unit tests​

Create a new file called buttonClick.test.js in your project folder and add the following code:

const { screen, fireEvent } = require('@testing-library/dom');
const userEvent = require('@testing-library/user-event');
const createButtonWithListener = require('./buttonClick');

describe('createButtonWithListener', () => {
  beforeEach(() => {
    document.body.innerHTML = '';
    const button = createButtonWithListener();
    document.body.appendChild(button);
  });

  it('should change the button text when clicked using fireEvent', () => {
    const button = screen.getByText('Click me!');
    fireEvent.click(button);
    expect(button).toHaveTextContent('Clicked!');
  });

  it('should change the button text when clicked using userEvent', () => {
    const button = screen.getByText('Click me!');
    userEvent.click(button);
    expect(button).toHaveTextContent('Clicked!');
  });
});

In this test file, we import the necessary functions from the Testing Library and the createButtonWithListener function. We set up a beforeEach function to create and add the button to the document body. We then write two test cases, one using fireEvent and the other using userEvent, to simulate the user clicking the button and verify that the button's text content changes as expected.

Running the tests​

To run the tests, execute the following command in your terminal:

npm test

Jest will automatically discover and run the test file, and you should see the test results in your terminal.

Using the Testing Library to test user interactions in your web applications helps ensure that your code behaves as expected and makes it easier to identify and fix bugs. It also encourages you to write modular, testable code, which can lead to better overall code quality.