Stack Exchange
Unit test of component when using Ant Design with Form.create
I have the following React Component
import React from "react";
import { Form, Input } from "antd";

class FormDataImportProtocol extends React.Component {
  callMyMethod = (id) => {
    //...code...
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        callMyMethod(values.dummyvalue);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <>
        <h2>Heading</h2>
        <Form layout="horizontal" onSubmit={this.handleSubmit}>
          <Form.Item label="dummy">
            {getFieldDecorator("dummy", { initialValue: "dummy" })(
              <Input />
            )}
          </Form.Item>
        </Form>
      </>
    );
  }
}

export default Form.create()(FormDataImportProtocol);

And I want to test that callMyMethod(str) is called. The problem is the wrapping of Form.create()(...)
How can I unwrap Form.create() in my test? Thanks for any advice.

can you explain what is that Form.create()?

You can stub Form.create for starters.

@estus: Do you have a code snippet for me?

I read the documentation again and found the solution for my problem:
describe("Test suite", () => {
  let  formRef;

  it("My test case", () => {
    const EnhancedForm = Form.create()(FormDataImportProtocol);
    const wrapper = mount(
      <EnhancedForm wrappedComponentRef={form => (formRef = form)} />
    );

    // formRef is my ref which I need for my spy:
    spy(formRef, "createDataImport");
  });
});

Thank you for your help.

I tried to follow this method but getting an error createDataImport method is not found.

Can you please tell me how to do that in v4 as in antd v4, Form.create() has been removed

if you do not need that Form.create() in your test, yo can do this

export default Form.create()(FormDataImportProtocol);
export const FormTest = FormDataImportProtocol;

