React Testing Library: Jak wyczyścić dane z kontrolki?

Usuwanie danych

Załóżmy, że testujesz przypadek: formularz jest wypełniony danymi i potrzebujesz przed sprawdzeniem testu, wyczyścić daną kontrolkę. Jak to zrobić?

Komponent:

import {useState} from "react";

export function MyComponent({ userName }: { userName: string}) {
    const [name, setName] = useState(userName);

    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>
        </>
    )
}

Test:

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

test('should edit user name', async () => {
    // given
    render(<MyComponent userName="Iwona" />);
    const input = getByDisplayValue('Iwona');
    await userEvent.clear(input);

    // when
    await userEvent.type(input, 'Adam');

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

Na starcie przekazywana jest wartość do komponentu, która jest przypisana jest do kontrolki.

Żeby wprowadzić nową wartość, musimy kontrolkę wyczyścić. Robi się to za pomocą metody: clear z biblioteki: user-event. Jeśli zakomentujesz tę linijkę wartość kontrolki po wywołaniu metody: type będzie: "IwonaAdam".