Issue title: unable to find/test antd component which appears outside wrapper
 Issue body: MyComponent
```
import React, { Component } from "react";
import { connect } from "react-redux";
import moment from "moment";
import { Select, Dropdown, Menu, Button, Table } from "antd";
import ShowConfirm from "../../../../../common/widgets/ModalConfirmation";
import UploadDocument from "../../Modals/UploadDocument";
import { manageRfq } from "../../../duck/actions";
const { Option } = Select;
const dateFormat = "DD MMM YYYY";

const columns = [
  {
    title: "Type",
    dataIndex: "documentType",
    render: text => (
      <p className={`doc-type-${text}`} style={{ fontSize: "16px" }}>
        {text}
      </p>
    )
  },
  {
    title: "File Name",
    dataIndex: "fileName",
    render: value => {
      return <span style={{ fontSize: "16px" }}>{value}</span>;
    }
  },
  {
    title: "Date",
    dataIndex: "date",
    render: text => <p style={{ fontSize: "16px" }}>{moment(text).format(dateFormat)}</p>
  }
];

export const selectType = (type, documentData) => {
  switch (type) {
    case "ALL":
      return documentData;
    case "INTERNAL":
      return documentData.filter(x => x.documentType === "INTERNAL");
    case "EXTERNAL":
      return documentData.filter(x => x.documentType === "EXTERNAL");
    default:
      return documentData;
  }
};
//this component is opening outside root component
const menuAction = ({ flag, onUploadHandle, deleteHandle, downloadHandle }) => (
  <Menu className="actions-wrapper">
    <Menu.Item key="external-doc" onClick={onUploadHandle}>
      Add External Document
    </Menu.Item>
    <Menu.Item key="internal-doc" onClick={onUploadHandle}>
      Add Internal Document
    </Menu.Item>
    <Menu.Item onClick={downloadHandle} disabled={flag}>
      Download
    </Menu.Item>
    <Menu.Item onClick={deleteHandle} disabled={flag} className={flag ? "" : "delete-document"}>
      Delete
    </Menu.Item>
  </Menu>
);

export class DocumentsTab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedDocs: [],
      newDocs: [],
      loading: false,
      type: "ALL",
      documents: [],
      isDraggerDisabled: false,
      visible: false,
      selectedRowKeys: []
    };
    this.selectDocumentTyepHandler = this.selectDocumentTyepHandler.bind(this);
    this.onUploadHandler = this.onUploadHandler.bind(this);
    this.deleteHandler = this.deleteHandler.bind(this);
    this.downloadHandler = this.downloadHandler.bind(this);
    this.clearTable = this.clearTable.bind(this);
    this.onSelectChange = this.onSelectChange.bind(this);
  }

  static getDerivedStateFromProps(props, state) {
    if (props.rfqDto) {
      return {
        ...state,
        documents: [...props.rfqDto.internalDocumentListDtos, ...props.rfqDto.externalDocumentListDtos]
      };
    }
    return null;
  }

  selectDocumentTyepHandler(value) {
    this.setState({ type: value });
  }

  onAdd = response => {
    let newData = [];
    newData.push(response);
    this.setState({
      newDocs: [...newData]
    });
  };

  deleteHandler(e) {
    const { selectedDocs } = this.state;
    const { clearTable } = this;
    const { uuid, deleteDocumentBulk } = this.props;
    const uuidArr = selectedDocs.map(a => a.uuid);
    ShowConfirm({
      title: "Confirmation",
      content: <p>Are you sure to delete {selectedDocs.length} document(s)?</p>,
      okText: "Confirm",
      cancelText: "Cancel",
      onOk() {
        deleteDocumentBulk(uuid, uuidArr, clearTable);
      }
    });
  }
  downloadHandler() {
    const uuidArr = this.state.selectedDocs.map(a => a.uuid);
    this.props.downloadDocument(this.props.uuid, uuidArr);
  }

  onUploadHandler(e) {
    this.setState({ visible: !this.state.visible, typeKey: e.key });
  }

  highlighter = (record, index) => {
    let highlightClassName;
    this.state.newDocs.forEach(re => {
      if (re.uuid === record.uuid) {
        highlightClassName = "highlight-doc";
      }
    });
    return highlightClassName;
  };
  clearTable() {
    // ajax request after empty completing
    this.setState({
      selectedRowKeys: []
    });
  }
  onSelectChange(selectedRowKeys, selectedRows) {
    this.setState({ selectedRowKeys, selectedDocs: selectedRows });
  }

  render() {
    const { selectedDocs, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };

    return (
      <div className="document-tab-wrapper">
        <div style={{ marginTop: "40px", marginBottom: "15px" }}>
          <div className="bullet-points-container">
            <p className="bullets">1</p> <p>MANAGE RFQ DOCUMENTS</p>
          </div>
          <h5>Type of Documents</h5>
          <Select defaultValue="All" style={{ width: 400, height: 50 }} onChange={this.selectDocumentTyepHandler}>
            <Option value="ALL">All</Option>
            <Option value="EXTERNAL">External Document</Option>
            <Option value="INTERNAL">Internal Document</Option>
          </Select>
          <br />
          <Dropdown
            overlay={menuAction({
              flag: selectedDocs.length === 0,
              onUploadHandle: this.onUploadHandler,
              deleteHandle: this.deleteHandler,
              downloadHandle: this.downloadHandler
            })}
            placement="bottomLeft">
            <Button>More Actions</Button>
          </Dropdown>
        </div>
        <div>
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={selectType(this.state.type, this.state.documents)}
            pagination={false}
            rowClassName={this.highlighter}
          />
        </div>
        <UploadDocument
          type={this.state.typeKey === "internal-doc" ? "INTERNAL" : "EXTERNAL"}
          uuid={this.props.uuid}
          uploadSupportingDocument={this.props.uploadSupportingDocument}
          onAdd={this.onAdd}
          isModalVisible={this.state.visible}
          onModalVisible={() => {
            this.setState({ visible: !this.state.visible });
          }}
        />
      </div>
    );
  }
}
export function mapStateToProps(state) {
  return {
    rfqDto: state.manageRFQ.rfqDto
  };
}

const actionCreators = {
  getSupportingDocument: manageRfq.getSupportingDocument,
  downloadDocument: manageRfq.downloadDocument,
  deleteDocumentBulk: manageRfq.deleteDocumentBulk,
  uploadSupportingDocument: manageRfq.uploadSupportingDocument
};

export default connect(
  mapStateToProps,
  actionCreators
)(DocumentsTab);

```

Test
Drpdown list is opening outside the root component 
```
describe("DocumentsTab", () => {
  let wrapper;
  beforeEach(() => {
    const component = (
      <MemoryRouter>
        <DocumentsTab />
      </MemoryRouter>
    );

    wrapper = mount(component);
    wrapper.setProps({
      rfqDto: rfqDto
    });
  });
it('should have options field',()=>{
    wrapper.find('Dropdown').at(1).simulate('click');
    wrapper.update();
    expect(wrapper.find('.ant-dropdown-menu-item').exists()).toBe(true)

  })
});


```

Error

```
expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      1215 |     wrapper.find('Dropdown').at(1).simulate('click');
      1216 |     wrapper.update();
    > 1217 |     expect(wrapper.find('.ant-dropdown-menu-item').exists()).toBe(true)
           |                                                              ^
      1218 | 
      1219 |   })
      1220 | });
```
 Comments: 
 Comment 0: This is a lot of code, so I'm not super clear on what's going on.

For one, I'd suggest avoiding `simulate`; it doesn't actually simulate anything.

I don't see `ant-dropdown-menu-item` anywhere in your code; why are you expecting to find it? Are your tests relying on implementation details of third-party components?
{'source': 'GithubIssues', 'repo_name_with_owner': 'airbnb/enzyme', 'issue_id': 562989767, 'repo_stars': 18060.0}