I used React-Table component in one of my custom component where I need to customize the header and cell content based on data. I am using with enzyme (shallow) and jest to test my component but not able to simulate events on Input field on the custom cell.
Mount can be used to render all the HTML but I want to avoid using it as I need to mock some other dependency
Below is the example code that mimics what I am doing in the component.
Thanks in advance for help
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"));
Aucun commentaire:
Enregistrer un commentaire