Я использовал компонент React-Table в одном из моих пользовательских компонентов, где мне нужно настроить заголовок и содержимое ячейки на основе данных. Я использую энзим (мелкий) и jest для тестирования моего компонента, но не могу имитировать события в поле ввода в пользовательской ячейке.
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"));