未在反应测试中调用onSubmit

Question

这是反应测试代码。我正在尝试提交表单并检查是否被调用。我是否缺少任何内容并且不了解表单提交的工作方式。我实际上是React和Rails的学习者，并且我使用recat作为前端，这是我第一次尝试在react中编写测试。拍摄快照不是什么大问题，但是尝试提交表单对我来说却很难。请帮助我。

import React from 'react';
import { shallow, mount } from 'enzyme';
import Form from './Form';
import { match } from 'react-router';
import * as StoreContext from '../../Store';
import { render, fireEvent, screen, waitFor } from "@testing-library/react"
// import * as StoreContext from './Store';

describe('VariantSkuForm', () => {
  let value = null;
  let wrapper = null;
  beforeEach(() => {
   value = { globalState: { } };
    jest
      .spyOn(StoreContext, 'useStoreContext')
      .mockImplementation(() => value);
  });

  it('should render children component', () => {
    wrapper = shallow(<Form />);
    expect(wrapper.getElements()).toMatchSnapshot();
  });



  it('should submit form', async () => {
    const subfn = jest.fn();
    const match = {
      params: { id: "1" }
    };
    const csrfToken = 'mocked-csrf-token';
    document.head.innerHTML = `<meta name="csrf-token" content="${csrfToken}">`;
    Form.prototype.handleFormSubmit = subfn;
    const { container } = render(<Form match = {match} />);
    const nameInput = container.querySelector('input[name="name"]');
    fireEvent.change(nameInput, {
      target: {
        value: "sam"
      }
    });
    expect(nameInput.value).toBe("sam");
    const apiKeyInput = container.querySelector('input[name="apiKey"]');
    fireEvent.change(apiKeyInput, {
      target: {
        value: "abc"
      }
    });
    // const apiSecretInput = container.querySelector('input[name="apiSecret"]');
    // fireEvent.change(apiSecretInput, {
    //   target: {
    //     value: "abc"
    //   }
    // });
    fireEvent.submit(container.querySelector('form'));
    await waitFor(() => {
      // const error = container.querySelector(".error")
      // expect(error).toBeInTheDocument();
      expect(subfn).toHaveBeenCalled();
    });

  });
});

这是实际的代码。请帮助我，我想念的是什么。每次收到的电话数量为零。

export default function Form({ history, match }) {
  const { globalState: { notificationRef } } = useStoreContext();

  const handleFormSubmit = () => {
    const {
      id, name, apiKey, apiSecret, rechargeToken,
    } = inputs;
    const method = id != null ? 'patch' : 'post';
    const url = id == null ? '/shopify_stores.json' : `/shopify_stores/${id}.json`;
    const action = id !== null ? 'updated' : 'created';
    const data = {
      shopifyStore: {
        name,
        apiKey,
        apiSecret,
        rechargeToken,
      },
    };

    apiCall
      .submitEntity(data, url, method)
      .then(() => {
        NotifyUser(`Successfully ${action}`, 'bc', 'success', notificationRef);
        history.push('/admin/shopify-stores');
      }).catch((err) => {
        addError(err);
      });
  };

  const {
    inputs, handleInputChange, handleSubmit, errors, addError, setInputs,
  } = useHeavenForm(initialValues, handleFormSubmit);

  useEffect(() => {
    if (match !== undefined) {
      const params = match.params.id;
      if (params !== undefined) {
        axios({
          method: 'get',
          url: `/shopify_stores/${params}`,
        }).then((response) => {
          const data = response.data.data.attributes;
          const responseData = {
            id: data.id,
            name: data.name != null ? data.name : '',
            apiKey: data.api_key != null ? data.api_key : '',
            apiSecret: data.api_secret != null ? data.api_secret : '',
            rechargeToken: data.recharge_token != null ? data.recharge_token : '',
          };
          setInputs(responseData);
        }).catch((error) => {
          // history.push('/admin/shopify-stores/new');
          addError(error);
        });
      }
    }
  }, []);

  return (
    <>
      <div className="content">
        <form onSubmit={handleSubmit}>