web-dev-qa-db-fra.com

Comment fireEvent.scroll sur un élément à l'intérieur du conteneur avec react-testing-library?

J'essaie de simuler le défilement dans un élément contenu dans un div, qui est celui passé à la fonction render.

J'essaie avec quelque chose comme ça, mais il semble que le div ne défile pas car mon prochain expect tombe.

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);

Est-ce la bonne façon de déclencher l'événement scroll? D'autres alternatives?

reactjsjestjsreact-testing-library
16
Eylen

Avez-vous essayé d'ajouter EventListener à votre conteneur de défilement? Je ne suis tout simplement pas sûr de la bibliothèque que vous venez d'utiliser, mais je suis sûr que dans des situations normales, appeler scroll fireEvent sans écouteur n'exécutera rien. Avant votre fireEvent, insérez quelque chose comme ceci:

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

et changez votre fireEvent en:

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