React Testing Library: Jak zasymulować kliknięcie w element?

Biblioteka

W tym wpisie podam przykład symulacji kliknięcia za pomocą biblioteki user-event.

Zanim zaczniemy, upewnij się, że masz ją zainstalowaną.

Instalacja

Żeby zainstalować, wywołaj:

npm install --save-dev @testing-library/user-event

Podstawy

Aby zacząć korzystać z user-event, musisz spełnić dwa warunki.

Pierwszy warunek: oznacz test jako asynchroniczny za pomocą async:

test('should ...', async () => {
    ...
});

Drugi warunek: wywołaj metodę setup:

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

test('should ...', async () => {
    const user = userEvent.setup();
});

Przykład

Komponent:

import {useState} from "react";

export function MyComponent() {
    const [state, setState] = useState(0);

    return (
        <>
            <div>
                {state}
            </div>
            <div>
                <button onClick={() => setState((prevState: number) => prevState + 1)}>Increment</button>
                <button onClick={() => setState((prevState: number) => prevState - 1)}>Decrement</button>
            </div>
        </>
    )
}

Testy:

import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event';
import {MyComponent} from "./MyComponent";

const { getByRole, getByText } = screen;

test('should increment counter', async () => {
    // given
    const user = userEvent.setup();
    render(<MyComponent />);
    const btnIncrement = getByRole('button', { name: "Increment"});

    // when
    await user.click(btnIncrement);

    // then
    expect(getByText('1')).toBeInTheDocument();
});

test('should decrement counter', async () => {
    // given
    const user = userEvent.setup();
    render(<MyComponent />);
    const btnDecrement = getByRole('button', { name: "Decrement"});

    // when
    await user.click(btnDecrement);

    // then
    expect(getByText('-1')).toBeInTheDocument();
});