html - ReactTestUtils.renderIntoDocument 一个带有 child 的组件 - child 似乎是 "not render in 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的渲染方法

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 元素。它有一个设置的宽度，whitespace: nowrap, overflow: hidden

这是`SlidingContainer'的updateScrollState方法

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 中。

Answer 1

您需要将其挂载到 DOM。使用 window.body.appendChild($bodyElement)