3

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

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

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();
  });
})

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

4

1 回答 1

0

您需要一种将模拟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);
于 2021-02-09T13:40:14.650 回答