Как проверить компонент ReactTable, используемый с реквизитами рендеринга в столбцах? - PullRequest
0 голосов
/ 25 марта 2019

Я использовал компонент 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"));

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