CODEWITHSUNDEEP
reactjsunit-testingantd
R-on
R-on

Reputation: 68

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.

Upvotes: 0

Views: 4135

Answers (2)

R-on
R-on

Reputation: 68

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.

Upvotes: 3

Ali Eslamifard
Ali Eslamifard

Reputation: 575

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

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

Upvotes: 1

Related Questions