反应 formik，测试是否在点击时调用提交函数 - 开玩笑，酶

Question

我正在测试一个包含表单的反应组件（使用 formik），我需要测试是否点击提交按钮，是否调用提交函数。

目前，测试失败。 现在，表单也使用 yup 需要字段架构，所以我想知道是否需要在测试之前填写所有字段。 因为目前，它不会提交，直到表单出现错误，即如果必填字段为空。 那么这是否会妨碍对按钮单击和调用函数的测试？

describe('submitform', () => {
  let wrapper = '';
  const handleSubmit = jest.fn();
  beforeEach(() => {
        wrapper = mount(<ExampleButton  >
                          <span className="visible-sm">Next</span>
                          <span className="visible-xs font-entity">
                            &rsaquo;
                          </span>
                          </ExampleButton>
        );
      });
  afterEach(() => {
        wrapper.unmount();
      });
  it('call function on click',async ()=> {    

    // let btn = wrapper.find('#btnEx').find('button').find('#btnEx');
    let btn = wrapper.find('button').simulate('click');
    console.log('wrapper : ',btn.debug());
    // btn.props().onClick();
    expect(handleSubmit).toHaveBeenCalled();
  });
})

在测试之前，我该如何填写这些字段？ 或者我什至需要在点击测试之前填写字段？

Answer 1

您需要一种方法将您的模拟handleSubmit函数传递给您的ExampleButton

如果ExampleButton有onSubmit事件处理程序道具，这会更容易：

// ExampleButton.jsx
const ExampleButton = ({ onSubmit }) => <button type="submit" onClick={onSubmit} />;

// ExampleButton.test.jsx
const handleSubmit = jest.fn();
...
wrapper = mount(<ExampleButton onSubmit={handleSubmit} />);

如果ExampleButton有内部事件处理函数，有点棘手

// ExampleButton.jsx
const ExampleButton = () => {
  const handleSubmit = (params) => {...}
  return <button type="submit" onClick={handleSubmit} />;
}

// ExampleButton.test.jsx
wrapper = mount(<ExampleButton onSubmit={handleSubmit} />);
wrapper.find('button').simulate('click', mockParams);