Question

我正在尝试测试使用react-measure的组件。

该组件非常简单

class AdjustableIframe extends React.Component {
  props: {
    children: node
  };

  render () {
    return (
      <Measure
        bounds
        onResize={(contentRect) => {
          console.log("I want to handle resize")
        }
        }
      >
        {({ measureRef }) => (
          <div ref={measureRef}>
            { this.props.children }
          </div>
        )
        }
      </Measure>
    )
  }
}

我正在尝试为此组件编写测试（因为我希望onResize方法具有复杂的逻辑）。但是我不知道如何在Jest测试中模拟调整大小。

我尝试调用window.resizeTo，但这无济于事。

有人能使它工作吗？

Answer 1

您应该可以执行以下操作：

const windowSize = 500;

Object.assign(window, {
  innerWidth: windowSize,
  innerHeight: windowSize,
  outerWidth: windowSize,
  outerHeight: windowSize,
}).dispatchEvent(new Event('resize'));

在使用react-media时，这对我有用，希望对您同样有用！

React：使用react-measure的测试组件

1 个答案: