如何在列中测试与Render道具一起使用的ReactTable组件？

Question

我在我的一个自定义组件中使用了React-Table组件，在该组件中，我需要根据数据自定义标题和单元格内容。我正在使用酶（浅）和玩笑来测试我的组件，但无法在自定义单元格的“输入”字段上模拟事件。

Mount可用于呈现所有HTML，但由于要模拟其他依赖项，我想避免使用它

下面是模仿我在组件中所做的示例代码。

预先感谢您的帮助

const readOnlyCell = {
  overflow: "hidden",
  textOverflow: "ellipsis"
};

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: makeData()
    };
  }
  renderEditable = cell => {
    return <input type="text" />;
  };
  render() {
    const { data } = this.state;
    return (
      <div>
        <ReactTable
          data={data}
          columns={[
            {
              Header: "First Name",
              id: "firstName",
              accessor: d => <div style={readOnlyCell}>{d.firstName}</div>,
              className: "sticky",
              headerClassName: "sticky"
            },
            {
              Header: "Last Name",
              id: "lastName",
              accessor: d => d.lastName
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: () => (
                <div>
                  <span>Sub Practice</span>
                </div>
              ),
              id: "practices",
              Cell: this.renderEditable
            },
            {
              Header: "Status",
              accessor: "status"
            },
            {
              Header: "Visits",
              accessor: "visits"
            }
          ]}
          defaultPageSize={10}
          className="-striped -highlight"
        />
        <br />
        <Tips />
        <Logo />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));