web-dev-qa-db-ja.com

react-testing-libraryを使用してコンテナー内の要素でfireEvent.scrollを実行する方法

render関数に渡されるdivに含まれる要素のスクロールをシミュレートしようとしています。

私はこのようなものを試していますが、次のexpectが落ちているため、divがスクロールしていないようです。

const content = (
      <div style={{display: 'flex'}}>
        <LazyList itemRenderer={itemRenderer} items={items} minItemHeight={MIN_ITEM_HEIGHT} />
      </div>
    );
mockOffsetSize(WIDTH, HEIGHT);

const {debug, container, queryByText} = render(content);
const scrollContainer = container.querySelector('.ReactVirtualized__Grid');
debug(scrollContainer);
fireEvent.scroll(scrollContainer, {y: 100});
debug(scrollContainer);

これはスクロールイベントを発生させる正しい方法ですか？他の選択肢はありますか？

reactjsjestjsreact-testing-library
16
Eylen

EventListenerをスクロールコンテナーに追加してみましたか？使用したばかりのライブラリについてはよくわかりませんが、通常の状況では、リスナーなしでscroll fireEventを呼び出しても何も実行されません。 fireEventの前に、次のようなものを挿入します。

scrollContainer.addEventListener('scroll', () => { /* some callback */ });

そして、fireEventを次のように変更します。

fireEvent.scroll(scrollContainer, { target: { scrollY: 100 } });
4
Sandy Brutas