反应钩子表单未能在反应测试库测试中提交

如何解决反应钩子表单未能在反应测试库测试中提交

我正在编写一个测试，以确保我的表单使用 react 测试库提交，并且我也在使用 react 钩子表单。我的提交方法未能在我的测试中被调用。当此测试运行时，我遇到以下错误：

● 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 = '[e-mail]';
    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();
});

解决方法

对于将来偶然发现此问题的任何人，我阅读了 Trixin 评论的 article 并重写了我的单元测试。这是它的精简版。基本上，我正在测试用户而不是开发人员的体验，以避免误报/否定

组件

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 = '[e-mail]';
    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();
});