Не удалось отправить форму хука реакции в тесте библиотеки тестирования реакции

Я пишу тест, чтобы убедиться, что моя форма отправляется с использованием библиотеки тестирования реакции, и я также использую форму реакции на крючок. Мой метод отправки не вызывается в моем тесте. Я приветствую следующую ошибку при запуске этого теста:

● reset password should send

    expect(jest.fn()).toHaveBeenCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

Может кто-нибудь объяснить, что я делаю неправильно?

Мой компонент

const ResetPassword = () => {
    const { handleSubmit } = useForm();

    const onSubmit = (resetFormData: { email: string }) => {
        const { email } = resetFormData;
        // sends email using external API
    };

    return (
            <form onSubmit={handleSubmit(onSubmit)}>
                <input
                    name="email"
                    type="text"
                    placeholder="Email Address"
                />
                <button type="submit">
                    Send Email
                </button>
            </form>
    );
};

export default ResetPassword;

Мой тестовый файл

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

afterEach(cleanup);

it('reset password should send', async () => {
    render(<ResetPassword />);

    const handleSubmit = jest.fn();
    const onSubmit = jest.fn();
    const value = '[email protected]';
    const input = screen.getByPlaceholderText(/Email Address/i);
    await userEvent.type(input, value);

    await act(async () => {
        userEvent.click(screen.getByRole('button', { name: /Send Email/i }));
    });

    expect(onSubmit).toHaveBeenCalled();
});

reactjs javascript react-hook-form react-testing-library
person Rafael    schedule 31.01.2021    source источник
comment
Определение локальной функции onSubmit с таким же именем в вашем тесте ничего не даст. Для интерпретатора это совсем другая функция. Вам нужно смоделировать фактическую функцию, которая вызывается в вашем компоненте. Кроме того, это тестирование деталей реализации и, как правило, не рекомендуется. Лучшим способом проверить это было бы смоделировать фактическую выборку, которая происходит при отправке.   -  person trixn    schedule 31.01.2021

Ответы (1)


arrow_upward
1
arrow_downward

Для тех, кто наткнется на это в будущем, я прочитал статью с комментариями Trixin и переписал мой модульный тест. Вот тонкая версия этого сейчас. По сути, я тестирую то, что испытает пользователь, а не разработчик, чтобы избежать ложных срабатываний/отрицательных результатов.

Составная часть

const ResetPassword = () => {
    const { handleSubmit } = useForm();
    const [message, setMessage] = useState(''); // I alert the 
    // user of a successful sent message
    const onSubmit = (resetFormData: { email: string }) => {
        const { email } = resetFormData;
        // sends email using external API
    };

    return (
            <form onSubmit={handleSubmit(onSubmit)}>
                <input
                    name="email"
                    type="text"
                    placeholder="Email Address"
                />
                <button type="submit">
                    Send Email
                </button>
                {message}
            </form>
    );
};

export default ResetPassword;

Тестовый файл

it('reset password should send', async () => {
    render(<ResetPassword />);

    const value = '[email protected]';
    const input = screen.getByPlaceholderText(/Email Address/i);
    await userEvent.type(input, value);

    await act(async () => {
        fireEvent.click(screen.getByText(/Send Email/i));
    });
    expect(screen.getByText('Message Sent!')).toBeInTheDocument();
});

it('reset password should not send', async () => {
    render(<ResetPassword />);

    const input = screen.getByPlaceholderText(/Email Address/i);
    const inValidEmail = 'user.com';
    
    await userEvent.type(input, inValidEmail);
    await act(async () => {
        fireEvent.click(screen.getByText(/Send Email/i));
    });
    expect(screen.getByText('Invalid email address')).toBeInTheDocument();

    // reset input value
    fireEvent.change(input, { target: { value: '' } });
    await userEvent.type(input, '');
    // user hits spacebar and tries to submit
    await act(async () => {
        fireEvent.keyDown(input, {
            charCode: 62,
            code: 62,
            key: 'Space Bar',
            keyCode: 62,
        });
    });

    await act(async () => {
        fireEvent.click(screen.getByText(/Send Email/i));
    });
    expect(screen.getByText('Email is required')).toBeInTheDocument();
});
person Rafael    schedule 31.01.2021