ReactTestUtils.renderIntoDocument компонент с дочерними элементами - кажется, что дочерние элементы не отображаются в DOM

Я визуализирую компонент в своем тесте так:

component = TestUtils.renderIntoDocument(
  <SlidingContainer {...props}>
    <div style={divStyle}>foo</div>
    <div style={divStyle}>foo</div>
    <div style={divStyle}>foo</div>
  </SlidingContainer>
);

$bodyElement = $(ReactDOM.findDOMNode(component.refs.body));

Это из метода рендеринга SlidingContainer

return (
  <div className={rootClassName} >
    <div className="sliding-container_arrow sliding-container_arrow--left"
         onClick={this.slide.bind(this, 'left')}>
      <div className={leftArrowClassName}></div>
    </div>
    <div className="sliding-container_body" ref="body">
      { this.props.children }
    </div>
    <div className="sliding-container_arrow sliding-container_arrow--right"
         onClick={this.slide.bind(this, 'right')}>
      <div className={rightArrowClassName}></div>
    </div>
  </div>
);

Как видите, $bodyElement — это элемент DOM, содержащий дочерние элементы. Он имеет заданную ширину, пробелы: nowrap, переполнение: скрыто.

Это updateScrollState метод `SlidingContainer'

updateScrollState($bodyElement) {
  var bodyElement = $bodyElement[0];
  var maxScrollLength = bodyElement.scrollWidth - bodyElement.offsetWidth;
  let maxToTheRight = maxScrollLength === $bodyElement.scrollLeft()
  let maxToTheLeft = $bodyElement.scrollLeft() === 0;

  this.setState({
    maxToTheRight: maxToTheRight,
    maxToTheLeft: maxToTheLeft
  });
}

Этот код работает, когда я тестирую его в браузере, но при запуске модульных тестов karma/jasmine bodyElement.scrollWidth и bodyElement.offsetWidth равны 0. Я искал вокруг, и кажется, что это проблема с элементом, отображаемым только в памяти и без реального DOM, хотя renderIntoDocument должен отображать элемент в dom.


person Vall3y    schedule 07.12.2015    source источник


Ответы (1)


Вам нужно смонтировать его в DOM. Используйте 1_

person Deepak Pai    schedule 14.05.2016