title: How do I test an onScroll event with jest/enzyme - Reactjs
body: <p>I am new to testing and can't figure out on how to test my component, my onScrollMock is not being fired with the code below, I'm using, jest and enzyme. please help.</p>
  
  <p>I am not sure on how to approach the condition inside the handleScroll as well, test-coverage's pointing on that function.</p>
  
  <p>StoryCardList.js</p>
  
  <pre><code> const handleScroll = (scrollEvent) =&gt; {
      const { scrollWidth, scrollLeft, clientWidth } = scrollEvent.target;
      const isRightEnd = scrollWidth - scrollLeft === clientWidth;
      setAnimation(isRightEnd);
    };
  
  function overlay(id, heroImage) {
      return (
        &lt;div
          key={id}
          className="story-card-list__overlay"
          style={{
            transition: `all ${transitionDuration}`,
            opacity: animate &amp;&amp; '1',
            visibility: animate &amp;&amp; 'visible',
            transitionDelay: animate &amp;&amp; transitionTiming,
            bottom: !animate &amp;&amp; '999px',
          }}
        &gt;
          &lt;StoryCard title="" heroImage={heroImage} /&gt;
          &lt;div className="story-card-list__overlay-elements"&gt;
            &lt;p className="story-card-list__overlay-elements__title"&gt;Continue watching story&lt;/p&gt;
            &lt;p className="story-card-list__overlay-elements__subtitle"&gt;Continue watching story&lt;/p&gt;
            &lt;StoriesMoreButton path="/story-list" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
    return (
      &lt;div className="story-card-list" onScroll={(scrollEvent) =&gt; handleScroll(scrollEvent)}&gt;
        {stories.map(({ id, title, heroImage }, index, sourceStories) =&gt; {
          if (index === stories.length - 1) {
            return lastStory(id, title, heroImage, index, sourceStories);
          }
          return renderStoryCards(id, title, heroImage, index, sourceStories);
        })}
      &lt;/div&gt;
    );
  </code></pre>
  
  <p>test</p>
  
  <pre><code>  let wrapper: ShallowWrapper;
  
  const setAnimationMock = jest.fn(() =&gt; true);
  const onScrollMock = jest.fn();
  const setState = jest.fn();
  const useStateSpy = jest.spyOn(React, 'useState');
  useStateSpy.mockImplementation((init) =&gt; [init, setState]);
    beforeEach(() =&gt; {
  wrapper = shallow(
    &lt;StoryCardList
      stories={stories}
      onScroll={onScrollMock}
      transitionDuration="2"
      transitionTiming="2"
      setAnimation={setAnimationMock}
      onClick={setAnimationMock}
      animate
    /&gt;
  );
  });
  
  
    it('should have scrollable div', () =&gt; {
  const logSpy = jest.spyOn(console, 'log');
  const mEvent = {
    target: {
      scrollWidth: 100,
      scrollLeft: 50,
      clientWidth: 50,
    },
  };
  wrapper.find('.story-card-list').simulate('scroll', mEvent);
  expect(setAnimationMock).toBeCalledWith(true);
  });
  </code></pre>