React: тестовый компонент, использующий реагирующее измерение

Question

Я пытаюсь протестировать компонент, который использует реагирующую меру.

Компонент довольно прост

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, надеюсь, это будет работать и для вас!