React Testing Library: Klawiatura

Testowanie klawiatury

Do symulacji obsługi klawiatury posłuży nam niezawodna biblioteka user-event.

Załóżmy, że mam zwykłe pole tekstowe. Po wpisaniu danych i wciśnięciu przycisku Enter wartość powinna zostać dodana do listy.

Przykład:

import { useState } from "react";

export function MyComponent() {
    const [tasks, setTasks] = useState([]);
    const [task, setTask] = useState('');

    const onChangeTask = (e) => {
        setTask(e.target.value)
    };

    const onAddTask = (e) => {
        if (e.code == 'Enter' && task) {
            setTasks([task, ...tasks]);
            setTask('');
        }
    }

    return (
        <>
            <div>
                <label htmlFor="newTask">Task title:</label>
                <input
                    type="text"
                    id="newTask"
                    value={task}
                    onChange={onChangeTask}
                    onKeyDown={onAddTask}
                />
            </div>
            <ul>
                {
                    tasks.map((task, index) => (
                        <li key={index}>
                            {task}
                        </li>
                    ))
                }
            </ul>
        </>
    )
}

Test:

import {render, screen, within} from '@testing-library/react';
const { getByLabelText, getByTestId } = screen;

const renderComponent = () => {
    render(<MyComponent />);

    const addTaskField = getByLabelText('Task title:');
    const taskList = within(getByTestId('task-list'));
    const addTask = async (newTask) => {
        await userEvent.clear(addTaskField)
        await userEvent.type(addTaskField, newTask);
        await userEvent.keyboard('[Enter]');
    }

    return {
        addTaskField,
        taskList,
        addTask
    }
}

test('should add new task to the list', async () => {
    // given
    const { taskList, addTask } = renderComponent();

    // when
    await addTask('My task');

    // then
    expect(taskList.getByText('My task'));
});

Za dodanie zadania do listy odpowiedzialna jest w tym teście funkcja addTask. Wywołana jest tam funkcja keyboard z biblioteki user event, która w tym przypadku symuluje wciśnięcie przycisku Enter na klawiaturze.