[英]Asserting prop call for form submit in React using React Testing Library
[英]React hook form failed to submit within react testing library test
我正在編寫測試以確保我的表單正在使用反應測試庫提交,並且我也在使用反應鈎子表單。 我的提交方法未能在我的測試中被調用。 當此測試運行時,我收到以下錯誤:
● 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 = 'user@email.com';
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 評論的文章並重寫了我的單元測試。 這是它的一個苗條版本。 基本上,我正在測試用戶而不是開發人員的體驗,以避免誤報/否定
零件
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();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.