Как проверить функцию, вызываемую при отправке в форме с использованием реагирующей-тестирующей библиотеки?

Question

В моем компоненте React Registration есть форма, где пользователь вводит свою электронную почту, пароль и подтверждение пароля. Я пытаюсь написать тесты, используя jest / реагировать на тестирование-библиотеку, однако я продолжаю получать тест, не пройденный, так как полученное количество вызовов функции равно 0 с ожидаемым числом вызовов, равным 1.

Я пробовал вариантысоответствия Jest, такого как .toHaveBeenCalled (), .toHaveBeenCalledWith (arg1, arg2, ...), toBeCalled (), все из которых все еще ожидают значение 1 или больше, но терпят неудачу, потому что полученное число равно 0. Я пробовал обаfireEvent.click и fireEvent.submit, которые по-прежнему не работают.

Registration.js

export const Signup = ({ history }) => {
  const classes = useStyles();

  const [signup, setSignup] = useState({
    email: null,
    password: null,
    passwordConfirmation: null,
  });
  const [signupError, setSignupError] = useState('');

  const handleInputChange = e => {
    const { name, value } = e.target;

    setSignup({ ...signup, [name]: value });
    console.log(signup);
  };

  const submitSignup = e => {
    e.preventDefault();
    console.log(
      `Email: ${signup.email}, Pass: ${signup.password}, Conf: ${signup.passwordConfirmation}, Err: ${signupError}`
    );
};

return (
    <main>
        <form onSubmit={e => submitSignup(e)} className={classes.form}>
         <TextField onChange={handleInputChange}/>
         <TextField onChange={handleInputChange}/>
         <TextField onChange={handleInputChange}/>
         <Button
            type="submit">
           Submit
         </Button>

Registration.test.js

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { render, cleanup, fireEvent } from '@testing-library/react';

import { Signup } from '../Components/Signup';

afterEach(cleanup);

const exampleSignup = {
  email: 'test123@test123.com',
  password: 'test123',
  passwordConfirm: 'test123',
};

describe('<Signup />', () => {
  test('account creation form', () => {

    const onSubmit = jest.fn();

    const { getByLabelText, getByText } = render(
      <BrowserRouter>
        <Signup onSubmit={onSubmit} />
      </BrowserRouter>
    );

    const emailInput = getByLabelText(/Enter your Email */i);
    fireEvent.change(emailInput, { target: { value: exampleSignup.email } });
    const passInput = getByLabelText(/Create a Password */i);
    fireEvent.change(passInput, { target: { value: exampleSignup.password } });
    const passCInput = getByLabelText(/Confirm Password */i);
    fireEvent.change(passCInput, {
      target: { value: exampleSignup.passwordConfirm },
    });

    fireEvent.submit(getByText(/Submit/i));

    expect(onSubmit).toHaveBeenCalledTimes(1);
  });
});

Результаты учетной записи запуска тестаформа создания

expect(jest.fn()).toHaveBeenCalledTimes(expected)

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