React hook 表单在 React 测试库测试中提交失败

Question

我正在编写一个测试，以确保我的表单使用反应测试库提交，并且我还使用反应挂钩表单。我的提交方法在我的测试中无法调用。当此测试运行时，我收到以下错误：

\n

\xe2\x97\x8f reset password should send\n\n    expect(jest.fn()).toHaveBeenCalled()\n\n    Expected number of calls: >= 1\n    Received number of calls:    0\n

\n

有人可以解释我做错了什么吗？

\n

我的组件

\n

const ResetPassword = () => {\n    const { handleSubmit } = useForm();\n\n    const onSubmit = (resetFormData: { email: string }) => {\n        const { email } = resetFormData;\n        // sends email using external API\n    };\n\n    return (\n            <form onSubmit={handleSubmit(onSubmit)}>\n                <input\n                    name="email"\n                    type="text"\n                    placeholder="Email Address"\n                />\n                <button type="submit">\n                    Send Email\n                </button>\n            </form>\n    );\n};\n\nexport default ResetPassword;\n

\n

我的测试文件

\n

import userEvent from '@testing-library/user-event';\nimport { render, cleanup, screen, act } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\n\nafterEach(cleanup);\n\nit('reset password should send', async () => {\n    render(<ResetPassword />);\n\n    const handleSubmit = jest.fn();\n    const onSubmit = jest.fn();\n    const value = 'user@email.com';\n    const input = screen.getByPlaceholderText(/Email Address/i);\n    await userEvent.type(input, value);\n\n    await act(async () => {\n        userEvent.click(screen.getByRole('button', { name: /Send Email/i }));\n    });\n\n    expect(onSubmit).toHaveBeenCalled();\n});\n

\n

Answer 1

对于将来偶然发现这一点的人，我阅读了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 = 'user@test.com';
    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();
});