html - ReactTestUtils.renderIntoDocument 子を持つコンポーネント - 子は「DOM でレンダリングされない」ようです

Question

テストでコンポーネントを次のようにレンダリングします。

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の render メソッドからのものです

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

このコードは、ブラウザーでテストすると機能しますが、カルマ/ジャスミン単体テストを実行するbodyElement.scrollWidthと、bodyElement.offsetWidth両方とも 0 になります。検索したところ、これは要素がメモリ内でのみレンダリングされ、実際の DOM なしでレンダリングされるという問題のようです。renderIntoDocument要素をdomにレンダリングすることになっていますが。

Answer 1

DOM にマウントする必要があります。使用するwindow.body.appendChild($bodyElement)