Я визуализирую компонент в своем тесте так:
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.