反应formik，测试是否在点击时调用提交函数 - jest，enzyme答案

【问题标题】：react formik, test if submit function called on click - jest,enzyme反应formik，测试是否在点击时调用提交函数 - jest，enzyme
【发布时间】：2021-02-09 21:40:14
【问题描述】：

我正在测试一个包含表单的 react 组件（使用 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();
  });
})

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

【问题讨论】：

ExampleButton 组件是否包含表单（如果是，它的名称真的很混乱）？你在哪里通过handleSubmit模拟？ “测试失败”是什么意思？是关于function has not been called 还是别的什么？

标签： javascript reactjs jestjs enzyme formik

【解决方案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);

【讨论】：