酶setState不重新呈现组件

Question

我正在尝试使用酶方法设置状态。在测试用例中设置状态之后，我能够在测试用例中再次将其恢复，这证明setState在工作，并且可以在console中看到预期的输出。但是，在组件内部，我无法获取由酶设置的状态，因为这使我失败了，并且我没有从组件中返回所需的视图，这是屏幕截图。您可以看到尽管有rows数据，但没有呈现任何数据网格表。

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)
);

测试用例

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);

  });