React Testing Library: Jak zasymulować wpisanie danych do kontrolki?

Testowanie wprowadzenia danych

Kiedy potrzebujesz stestować komponent, w którym zachodzą interakcje z użytkownikiem, warto napisać test, który zasymuluje cały proces, tak jakby robił to użytkownik. Możesz to zrobić za pomocą biblioteki user-event

Przykład

Komponent:

export function MyComponent() {
    const [name, setName] = useState('');

    const onInputChange = e => {
        setName(e.target.value);
    }

    return (
        <>
            { name &&
                <div>
                    Hello {name}! How are you?
                </div>
            }
            <div>
                <label htmlFor="name">Your name:</label>
                <input value={name} id="name" name="name" onChange={onInputChange} />
            </div>
        </>
    )
}

Kiedy użytkownik wpisze jakieś dane w pole tekstowe, na ekranie wyświetlony zostanie tekst.

Jak to przetestować?

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

const { getByLabelText, getByText } = screen;

test('should display greeting', async () => {
    // given
    render(<MyComponent />);
    const inputName = getByLabelText('Your name:');

    // when
    await userEvent.type(inputName, 'Kacper');

    // then
    expect(getByText('Hello Kacper! How are you?')).toBeInTheDocument();
});

Za pomocą getByLabelText i getByText pobieramy referencje do pola tekstowego i miejsca, gdzie tekst ma się wyświetlić po wpisaniu danych.

Za pomocą type z biblioteki user-event wprowadzany jest tekst do pola tekstowego. Pierwszy argument to referencja do kontrolki, dla której wpisujemy dane. Drugi argument to tekst, który chcemy przekazać.