Модульное тестирование компонента при использовании Ant Design с Form.create

Question

У меня есть следующий компонент React

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

И я хочу проверить, что вызывается callMyMethod (str).Проблема заключается в переносе Form.create () (...)

Как мне развернуть Form.create () в моем тесте?Спасибо за любой совет.

Answer 1

Я снова прочитал документацию и нашел решение для моей проблемы:

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

Спасибо за вашу помощь.

Answer 2

если вам не нужно это Form.create() в тесте, вы можете сделать это

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