How to test components wrapped in an antd Form?

I've been struggling with this for months, now. Although there's a lot of speculation on the correct way to test antd wrapped components, none of the suggestions worked for this particular component.

So, I have a component which is a modal with an antd form. In this form, I have a few fields: an input, a select and a tree select, nothing too fancy.

It's basically this:

class FormModal extends React.Component {
  static propTypes = {
    data: propTypes.object,
    form: propTypes.object,
    scopes: propTypes.array.isRequired,
    clients: propTypes.array.isRequired,
    treeData: propTypes.array.isRequired,
    isEditing: propTypes.bool.isRequired,
    isSaving: propTypes.bool.isRequired,
    onCancel: propTypes.func.isRequired,
    onSave: propTypes.func.isRequired,
    onFilterTreeData: propTypes.func.isRequired,
    visible: propTypes.bool.isRequired
  }

  static defaultProps = {
    data: null,
    form: {}
  }

  state = {
    selectedScopes: [],
    newScopes: [],
    inputVisible: false,
    inputValue: ''
  };

  componentDidMount() {
    // do stuff
  }

  handleSave = () => {
    // do stuff
  }

  handleSelectedScopesChange = (event) => {
    // do stuff
  }

  updateTreeSelect = () => {
    const { form } = this.props;
    const { selectedScopes } = this.state;

    form.setFieldsValue({
      allowedScopes: selectedScopes
    });
  }

  handleRemoveTag = (removedTag) => {
    const selectedScopes = this.state.selectedScopes.filter(scope => scope !== removedTag);
    const newScopes = this.state.newScopes.filter(scope => scope !== removedTag);
    this.setState({ selectedScopes, newScopes }, this.updateTreeSelect);
  }

  showInput = () => {
    this.setState({ inputVisible: true }, () => this.input.focus());
  }

  handleInputChange = (e) => {
    const inputValue = e.target.value;
    this.setState({ inputValue });
  }

  handleInputConfirm = () => {
    const { newScopes, inputValue } = this.state;
    let tags = newScopes;
    if (inputValue && tags.indexOf(inputValue) === -1) {
      tags = [inputValue, ...tags];
    }

    this.setState({
      newScopes: tags,
      inputVisible: false,
      inputValue: '',
    });
  }

  saveInputRef = input => this.input = input

  renderTags = (scopeArrays) => {
    const tags = scopeArrays.map(scopeArray =>
      scopeArray.map((permition) => {
        let scopeType = null;
        if (permition.includes('read') || permition.includes('get')) scopeType = 'blue';
        if (permition.includes('create') || permition.includes('write') || permition.includes('send')) scopeType = 'green';
        if (permition.includes('update')) scopeType = 'gold';
        if (permition.includes('delete')) scopeType = 'red';
        return (
          <Tag
            key={permition}
            color={scopeType || 'purple'}
            style=
            closable
            afterClose={() => this.handleRemoveTag(permition)}
          >
            {permition}
          </Tag>
        );
      })
    );

    return [].concat(...tags);
  }

  render() {
    const {
      selectedScopes,
      newScopes,
      inputValue,
      inputVisible
    } = this.state;

    const {
      form,
      treeData,
      clients,
      isEditing,
      isSaving,
      onCancel,
      onFilterTreeData,
      visible
    } = this.props;

    const {
      getFieldDecorator,
      getFieldsError,
    } = form;

    const selectedScopesTags = this.renderTags([newScopes, selectedScopes]);

    const clientOptions = clients.map(client => (<Option key={client._id}>{client.name}</Option>));

    return (
      <Modal
        className="user-modal"
        title={isEditing ? 'Editing Group' : 'Creating Group'}
        visible={visible}
        onCancel={onCancel}
        footer={[
          <Button key="cancel" onClick={onCancel}>Cancel</Button>,
          <Button
            key="save"
            type="primary"
            loading={isSaving}
            onClick={this.handleSave}
            disabled={formRules.hasErrors(getFieldsError())}
          >
            Save
          </Button>
        ]}
      >
        <Form layout="vertical" onSubmit={this.handleSave}>
          <Row gutter={24}>
            <Col span={12}>
              <FormItem label="Name">
                {getFieldDecorator(
                  'name',
                  { rules: [formRules.required, { max: 20, message: 'Group name can\'t excede 20 characters' }] }
                )(
                  <Input />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="Client">
                {getFieldDecorator(
                  'client', { rules: [formRules.required] }
                )(
                  <Select placeholder="Please select client">
                    {clientOptions}
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem label="Scopes">
                {getFieldDecorator(
                  'allowedScopes'
                )(
                  <TreeSelect
                    treeData={treeData}
                    filterTreeNode={onFilterTreeData}
                    onChange={this.handleSelectedScopesChange}
                    treeCheckable
                    dropdownStyle=
                    showCheckedStrategy="SHOW_PARENT"
                    searchPlaceholder="Filter by scopes"
                    className="groups__filter groups__filter--fill"
                  />
                )}
              </FormItem>
            </Col>
            <Col span={24}>
              <Card
                title="Selected Scopes"
                style=
              >
                <div>
                  {inputVisible && (
                    <Input
                      ref={this.saveInputRef}
                      type="text"
                      size="small"
                      style=
                      value={inputValue}
                      onChange={this.handleInputChange}
                      onBlur={this.handleInputConfirm}
                      onPressEnter={this.handleInputConfirm}
                    />
                  )}
                  {!inputVisible && (
                    <Tag
                      onClick={this.showInput}
                      style=
                    >
                      <Icon type="plus" /> New Scope
                    </Tag>
                  )}
                </div>
                { selectedScopesTags.length > 0 ? (
                  selectedScopesTags
                ) : <p>No scopes selected yet.</p> }
              </Card>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(FormModal);

I know that this component is urging for a refactoring, but that's not my job right now. I need to UI test this and validate if everything is working properly.

I'm trying to test if the form fields are rendering properly. I'm using Jest and Enzyme and so far I got this:

describe('Groups modal', () => {
  let props;
  const groupsModal = () =>
    mount(
      <FormModal.WrappedComponent {...props} />
    )

  beforeEach(() => {
    props = {
      data: null,
      scopes: [],
      clients: [],
      treeData: [],
      isEditing: false,
      isSaving: false,
      onCancel: jest.fn(),
      onSave: jest.fn(),
      onFilterTreeData: jest.fn(),
      visible: true,
      form: {
        getFieldsError: jest.fn(() => { return {} }),
        getFieldDecorator: () => (component) => component
      }
    };
  });

  it('should render properly', () => {
    const wrapperDivChilds = groupsModal().find('.user-modal').children();

    expect(wrapperDivChilds.length).toBeGreaterThanOrEqual(1);
  });

  describe('form fields', () => {
    it('should render name input', () => {
      const nameInput = groupsModal().find(Input);

      expect(nameInput.length).toBe(1);
    });

    it('should render clients select', () => {
      const clientsSelect = groupsModal().find(Select);

      expect(clientsSelect.length).toBe(1);
    });

    it('should render scopes tree select', () => {
      const scopesTreeSelect = groupsModal().find(TreeSelect);

      expect(scopesTreeSelect.length).toBe(1);
    });
  });
});

All of my tests that validate if the inputs were rendered are failing. As you can see, I tried mocking the form decorator functions, but still no success...

So, my question is: how should I test this component?