Enzyme setState not re-rendering the component - reactjs

Question

I am trying to set a state using enzyme method. After setting a state inside test case I was able to get it back again within the test case which proves that setState is working and I can see the expected output in console. However, inside component I was not able to get state which was set by enzyme because of this my is failing and I am not getting desire view back from component, here is screenshot. You can see there is not data grid table rendered despite having rows data.
table.js
import React, { Component } from 'react';
import styled from 'styled-component';
import ReactDataGrid from 'react-data-grid';
import { Filters } from 'react-data-grid-addons';
import PropTypes from 'prop-types';
export class Table extends Component {
constructor(props) {
super(props);
const {
NumericFilter,
AutoCompleteFilter,
} = Filters;
this.columns = [
{ key: "id", name: "ID", editable: true },
{ key: "title", name: "Title", editable: true },
{ key: "complete", name: "Complete", editable: true }
];
this.state = {
rows: [],
};
}
renderRow = (i) => {
const { rows } = this.state;
return rows[i];
}
render() {
const { className } = this.props;
const { rows } = this.state;
console.log('rows Length', rows.length) // always 0
return (
<div className={className}>
{rows.length
? (
<ReactDataGrid
rowHeight={50}
columns={this.columns}
rowGetter={this.renderRow}
rowsCount={rows.length}
/>
)
: <span id="no-product-message">No Items to be Shown</span>
}
</div>
);
}
}
Table.propTypes = {
className: PropTypes.string,
};
Table.defaultProps = {
className: '',
};
export default styled(Table)`
.react-grid-HeaderCell{
white-space: normal !important;
}
.react-grid-Cell__value{
display: flex;
align-items: center;
}
`;
mountWithTheme
export const mountWithTheme = (children, options) => (
mount(<ThemeProvider theme={theme}>{children}</ThemeProvider>, options)
);
test case
it('should render table if product data is available', () => {
const wrapper = mountWithTheme(<Table />).find(Table);
const instance = wrapper.instance();
jest.spyOn(instance, 'renderRow');
instance.setState({
rows: [{ id: 0, title: "Task 1", complete: 20 }],
});
console.log(instance.state.rows) // [{ id: 0, title: "Task 1", complete: 20 }]
expect(wrapper.find('ReactDataGrid').exists()).toBe(true);
expect(instance.renderRow).toHaveBeenCalledTimes(1);
});