ReactJS: Ничего не было возвращено из рендера при тестировании компонента HOC - PullRequest
Новая
       17

ReactJS: Ничего не было возвращено из рендера при тестировании компонента HOC

0 голосов
/ 05 октября 2019

У меня есть следующий код:

TableWrapper.jsx

const TableWrapper = props => {
    return (
      <div>
        {props.table}
      </div>
    );
}

Затем он используется в Foo.jsx

export class FooTable extends React.Component {
  render() {
    return (
      <div>
        <TableWrapper
          table={<ListTable />}
        />
      </div>
    );
  }
}

Здесь ListTable.jsx

  render() {
    const {data, error, asyncStatus} = this.props.instanceList;
    return (
      <div>
        <CustomTable
           title='123'
        />
      </div>
    )
  }

Я использую шут и фермент, и для одного из тестов: 

    it('Simulate search input field', () => {
      const container = mount(<FooTable {...mockProps} />);
    });
  });

Я получаю 

   console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
      Error: Uncaught [Invariant Violation: TableWrapperComponent(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]

Если я использую shallow, я не получаюошибка. Чего мне не хватает?

1 Ответ

0 голосов
/ 05 октября 2019

Вы должны использовать render, а затем поместить свой компонент в ваш рендер. 

<TableWrapper render={table => <ListTable props={...this.props} />} />

Теперь я спрошу, где ваша CustomTable, который вы используете в ListTable? В какой-то момент вам придется создать свой начальный компонент или использовать один из множества библиотек. 

const myGenericComponent = (props) => {  
 // create variables deconstruct props as you like
const name = props.name 
    return (
// assuming I passed in name from my parent component as one of my props
      <div><table><th>Table {name}</th><td>{name}</td></table>
  )  
}
export default myGenericComponent;
...