Фермент setState не перерисовывает компонент - PullRequest
0 голосов
/ 11 декабря 2018

Я пытаюсь установить состояние с помощью ферментного метода.После установки состояния внутри тестового примера я смог вернуть его обратно в тестовом примере, который доказывает, что setState работает, и я вижу ожидаемый результат в console.Тем не менее, внутри компонента я не смог получить состояние, которое было установлено энзимом, из-за этого мой сбой, и я не получаю желание просмотреть обратно из компонента, вот скриншот.Вы можете видеть, что таблица данных не отображается, несмотря на наличие данных rows.

enter image description here

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

  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...