web-dev-qa-db-ja.com

clientHeightとscrollHeightをReact +テスト用の酵素でモックする

ScrollContainerと呼ばれるReactコンポーネントがあり、コンテンツが一番下にスクロールされたときにprop関数を呼び出します。

基本的に：

_componentDidMount() {
  const needsToScroll = this.container.clientHeight != this.container.scrollHeight

  const { handleUserDidScroll } = this.props

  if (needsToScroll) {
    this.container.addEventListener('scroll', this.handleScroll)
  } else {
    handleUserDidScroll()
  }
}

componentWillUnmount() {
  this.container.removeEventListener('scroll', this.handleScroll)
}

handleScroll() {
  const { handleUserDidScroll } = this.props
  const node = this.container
  if (node.scrollHeight == node.clientHeight + node.scrollTop) {
    handleUserDidScroll()
  }
}
_

_this.container_は、renderメソッドで次のように設定されます。

_<div ref={ container => this.container = container }>
  ...
</div>
_

Jest + Enzymeを使用してこのロジックをテストしたいと思います。

ClientHeight、scrollHeight、scrollTopの各プロパティを、テストシナリオで選択した値にする方法が必要です。

浅い代わりにマウントを使用すると、これらの値を取得できますが、常に0です。ゼロ以外の値に設定する方法はまだ見つかりません。コンテナをwrapper.instance().container = { scrollHeight: 0 }などに設定できますが、これはテストコンテキストのみを変更し、実際のコンポーネントは変更しません。

任意の提案をいただければ幸いです！

reactjsunit-testingjestjsenzyme
10
Josh G

Jest spyOnは、バージョン22.1.0以降のゲッターとセッターをモックするために使用できます。 jest docs を参照してください

以下のコードを使用して、document.documentElement.scrollHeightの実装をモックしました

const scrollHeightSpy = jest
                    .spyOn(document.documentElement, 'scrollHeight', 'get')
                    .mockImplementation(() => 100);

ScrollHeight値として100を返します。

8
kamlesh

JSDOMは実際のレンダリングを行わず（DOM構造をシミュレートするだけです）、要素の寸法などは期待どおりに計算されません。メソッド呼び出しを介してディメンションを取得する場合、テスト内でこれらをモックする方法があります。例えば：

 beforeEach(() => {
    Element.prototype.getBoundingClientRect = jest.fn(() => {
          return { width: 100, height: 10, top: 0, left: 0, bottom: 0, right: 0 };
        });
  });

これは明らかにあなたの例では機能しません。要素のこれらのプロパティをオーバーライドして、変更をモックすることができる場合があります。しかし、それが特に意味のある/有用なテストにつながることはないと思います。

参照 このスレッド

6
blindfish