Question

我正在测试一个 InfiniteScroll 组件，但却遇到了这个奇怪的问题; querySelector('html, body')没有所述方法所期望的属性（例如，clientHeight，innerHeight，querySelector，style，addEventListener等。），但有_readOnly，_tagName，_created，_ownerDocument等属性，我怀疑这些属性来自jsdom。

我在测试套件中运行此queySelector('html, body')以滚动浏览器。这是测试套件中document.querySelector的一小部分：

var body = document.querySelector('html, body');
console.log(body); // Object properties I do not expect
console.log(body.scrollTop); // => undefined

以下是 InfiniteScroll 组件的代码：

import React from 'react';

import timeout from '../../utils/timeout';

var _promise = null; // Promise flag
var _body = document.body;

var InfiniteScroll = React.createClass({
  propTypes: {
    /**
     * Flag to check if the callback should be executed
     * once the threshold / bottom has been reached.
     *
     * @default false
     */
    disabled: React.PropTypes.bool,

    /**
     * The callback to be executed once the
     * threshold / bottom has been reached
     */
    callback: React.PropTypes.func.isRequired,

    /**
     * Allowance to be scrolled, so callback is executed
     * although not actually at the bottom
     *
     * * @default 250
     */
    threshold: React.PropTypes.number,

    /**
     * Number of milliseconds to delay the execution
     * of the callback.
     *
     * @default 250
     */
    throttle: React.PropTypes.number
  },

  /**
   * Some property defaults
   */
  getDefaultProps() {
    return { disabled: false, threshold: 250, throttle: 250 };
  },

  /**
   * Run `forceUpdate` when the window
   * resizes, so the bottom is still properly calculated
   */
  componentDidMount() {
    window.addEventListener('scroll', this._handleScroll, false);
    window.addEventListener('onresize', this._handleWindowResize);
  },

  /**
   * Unmount our `forceUpdate` bind
   */
  componentWillUnmount() {
    window.removeEventListener('scroll', this._handleScroll);
    window.removeEventListener('onresize', this._handleWindowResize);
  },

  /**
   * Handles our window resize. This function
   * simply executes `forceUpdate`
   */
  _handleWindowResize(evt) {
    this.forceUpdate();
  },

  render() {
    var { disabled, callback, threshold, throttle, ...other } = this.props;    

    return (
      <div {...other}>
        {this.props.children}
      </div>
    );
  },

  /**
   * Handles infinite scrolling accordingly
   */
  _handleScroll(evt) {
    var { callback, disabled, threshold, throttle } = this.props;

    var height = _body.clientHeight;
    var scroll = _body.scrollTop;
    var bottom = _body.scrollHeight;

    if ( disabled === true || _promise !== null || scroll + threshold < bottom - height ) {
      return;
    }

    _promise = timeout(throttle).then(() => {
      // We should be using `finally`, but es6-promise unfortunately
      // does not support this. Since we're not actually doing any
      // async code (and which could fail), let's just use then. Overhead
      // just to be arrogant
      Promise.resolve(callback()).then(() => { _promise = null; });
    })
  }
});

export default InfiniteScroll;

有没有什么方法可以访问所提到的预期属性？感谢。

Answer 1

当您执行document.querySelector('html, body')时，您要求匹配选择器html, body的节点集的第一个，即<html>的第一个节点您的 DOM树

中的{}或<body>个节点

这将始终是 HTML 文档中的<html>元素

您可能只想访问document.body或document.querySelector('body')

在 Chrome 中， HTMLHtmlElement 确实有 scrollTop 属性，我不知道 Jest >做的不同。

document.querySelector

Jest - querySelector（'html，body'）返回奇怪的对象

1 个答案: