测试是否已调用handleSubmit，对钩子做出反应，

Question

我正在尝试向Login组件编写单元测试，以检查在所有输入字段都填充了值之后是否已调用 handleSubmit 函数。

这是我的Login.js组件和Login.test.js

//Login.js

import React, { useState } from 'react';
import axios from 'axios';
import useStyles from '../styles/LoginStyle';
import { useStatefulFields } from '../../hooks/useStatefulFields';

function Login({ success }) {
  const [values, handleChange] = useStatefulFields();
  const [error, setError] = useState();

  const handleSubmit = async () => {
    await axios.post('www.example.com', {values}, {key})
    .then((res) => {
      if (res.data.success) {
        success();
      } else {
        setError(res.data.error);
      }
    })
  };
  
  return (
    <div>
        <p className={classes.p}>Personalnummer</p>
        <input
          type="number"
          className={classes.input}
          onChange={handleChange}
          name="personal_number"
          title="personal_number"
        />
        <p className={classes.p}>Arbeitsplatz</p>
        <input
          type="number"
          onChange={handleChange}
          name="workplace"
          title="workplace"
          className={classes.input}
        />
        <p className={classes.p}>Passwort</p>
        <input
          type="password"
          className={classes.input}
          onChange={handleChange}
          name="password"
          title="password"
        />

        <ColorButton
          id="login-button"
          className={
            (values.password && values.personal_number && values.workplace)
              ? classes.button
              : classes.buttonGray
          }
          disabled={!values.password && !values.personal_number && !values.workplace}
          size="large"
          onClick={
            values.password && values.personal_number && values.workplace
              ? handleSubmit
              : () => {}
          }
        >
        </ColorButton>
    </div>
  )
}

//Login.test.js

import React from 'react';
import { shallow } from 'enzyme';
import Login from '../components/Workers/Login';

let wrapper;

beforeEach(() => {
  wrapper = shallow(<Login success={() => {}} />);
});

test('should call handleSubmit', () => {
  const spy = jest.spyOn(wrapper.instance(), 'handleSubmit');
  wrapper.find('input[name="workplace"]').simulate('change', { target: { name: 'workplace', value: 'test' } });
  wrapper.find('input[name="password"]').simulate('change', { target: { name: 'password', value: 'test' } });
  wrapper.find('input[name="personal_number"]').simulate('change', { target: { name: 'personal_number', value: 'test' } });
  wrapper.find('#login-button').simulate('click');
  expect(spy).toHaveBeenCalled();
});

我得到的错误是：

TypeError：无法读取null的属性“ handleSubmit”

我在做什么错了？