如何使用jest/enzyme-Reactjs测试onScroll事件

我是测试新手，不知道如何测试我的组件，我的onScrollMock没有使用下面的代码，我使用的是，jest和Ezyme。请帮忙

我也不确定如何处理handleScroll中的条件，测试覆盖率指向该函数

StoryCardList.js

 const handleScroll = (scrollEvent) => {
    const { scrollWidth, scrollLeft, clientWidth } = scrollEvent.target;
    const isRightEnd = scrollWidth - scrollLeft === clientWidth;
    setAnimation(isRightEnd);
  };

function overlay(id, heroImage) {
    return (
      <div
        key={id}
        className="story-card-list__overlay"
        style={{
          transition: `all ${transitionDuration}`,
          opacity: animate && '1',
          visibility: animate && 'visible',
          transitionDelay: animate && transitionTiming,
          bottom: !animate && '999px',
        }}
      >
        <StoryCard title="" heroImage={heroImage} />
        <div className="story-card-list__overlay-elements">
          <p className="story-card-list__overlay-elements__title">Continue watching story</p>
          <p className="story-card-list__overlay-elements__subtitle">Continue watching story</p>
          <StoriesMoreButton path="/story-list" />
        </div>
      </div>
    );
  }
  return (
    <div className="story-card-list" onScroll={(scrollEvent) => handleScroll(scrollEvent)}>
      {stories.map(({ id, title, heroImage }, index, sourceStories) => {
        if (index === stories.length - 1) {
          return lastStory(id, title, heroImage, index, sourceStories);
        }
        return renderStoryCards(id, title, heroImage, index, sourceStories);
      })}
    </div>
  );

constHandleScroll=（scrollEvent）=>{
常量{scrollWidth，scrollLeft，clientWidth}=scrollEvent.target；
const isrimmed=scrollWidth-scrollLeft==clientWidth；
setAnimation（isrelined）；
};
函数覆盖（id，英雄图像）{
返回(
继续观看故事

继续观看故事

);
}
返回(
handleScroll（滚动事件）}>
{stories.map（{id，title，heromage}，index，sourceStories）=>{
如果（索引===stories.length-1）{
返回lastStory（id、标题、英雄形象、索引、sourceStories）；
}
返回renderStoryCards（id、标题、英雄形象、索引、sourceStories）；
})}
);

试验

let包装器：ShallowRapper；
const setAnimationMock=jest.fn（（）=>true）；
const onScrollMock=jest.fn（）；
const setState=jest.fn（）；
const useStateSpy=jest.spyOn（React，'useState'）；
useStateSpy.mockImplementation（（init）=>[init，setState]）；
在每个之前（（）=>{
包装纸=浅(
);
});
它（'应该有可滚动的div'，（）=>{
constlogspy=jest.spyOn（控制台，'log'）；
常数mEvent={
目标：{
卷轴宽度：100，
左:50,，
客户宽度：50，
},
};
wrapper.find（'.story card list'）.simulate（'scroll'，mEvent）；
期望（setAnimationMock）.toBeCalledWith（true）；
});

你应该使用

酶

例如

index.tsx
：

import React，{useState}来自“React”；
导出常量StoryCardList=（）=>{
const[animate，setAnimation]=useState（false）；
常量handleScroll=（e）=>{
const{scrollWidth，scrollLeft，clientWidth}=e.target；
const rightEnd=scrollWidth-scrollLeft==clientWidth；
如果（右端）{
设置动画（真）；
}否则{
设置动画（假）；
}
};
返回(
handleScroll（e）}>
故事卡列表，动画：{animate？'animation enabled'：'animation disabled'}
);
};

index.spec.tsx
：

从“/”导入{StoryCardList}；
从“React”导入React；
从“酶”中导入{浅，浅Rapper}；
描述（'59675724'，（）=>{
让包装：浅层振打器；
在每个之前（（）=>{
包装器=浅（）；
});
之后（（）=>{
开玩笑。恢复记忆（）；
});
它（'应启用动画'，（）=>{
常数mEvent={
目标：{scrollWidth:100，scrollLeft:50，clientWidth:50}，
};
wrapper.find（'.story card list'）.simulate（'scroll'，mEvent）；
expect（wrapper.find（'.story card list'）.text（））.toEqual（'story card list，animate:animation enabled'）；
});
它（'应该禁用动画'，（）=>{
常数mEvent={
目标：{scrollWidth:100，scrollLeft:50，clientWidth:100}，
};
wrapper.find（'.story card list'）.simulate（'scroll'，mEvent）；
expect（wrapper.find（'.story card list'）.text（））.toEqual（'story card list，animate:animation disabled'）；
});
});

100%覆盖率的单元测试结果：

通过src/stackoverflow/59675724/index.spec.tsx（15.734s）
59675724
✓ 应启用动画（26毫秒）
✓ 应禁用动画（9毫秒）
-----------|----------|----------|----------|----------|-------------------|
文件|%Stmts |%Branch |%Funcs |%Line |未覆盖行|s|
-----------|----------|----------|----------|----------|-------------------|
所有文件| 100 | 100 | 100 | 100 ||
index.tsx | 100 | 100 | 100 | 100 ||
-----------|----------|----------|----------|----------|-------------------|
测试套件：1个通过，共1个
测试：2次通过，共2次
快照：共0个
时间：18.313s

源代码：
您好，我对测试非常陌生，但是您能告诉我这行代码的等价物const logSpy=jest.spyOn（console，'log'）；要查看上面的代码？@suisied使用
setAnimation
函数，您需要模拟或监视
setAnimation
函数。您没有提供
setAnimation
功能，无法帮助您导入它。这就是为什么当你问一个问题时，你应该提供一个最小的完整的代码片段。谢谢！我已经更新了这个问题，你能把它写在jsx上吗，我不熟悉tsx@suisied您不需要提供不相关的部分，例如样式道具和子组件。它与测试
onScroll
事件处理程序无关。您仍然没有提供
setAnimation
函数，如何导入它以及它的实现。const[animate，setAnimation]=React.useState（false）；像这样，它被设置在onScroll中，并在样式中有条件地使用
  let wrapper: ShallowWrapper;

const setAnimationMock = jest.fn(() => true);
const onScrollMock = jest.fn();
const setState = jest.fn();
const useStateSpy = jest.spyOn(React, 'useState');
useStateSpy.mockImplementation((init) => [init, setState]);
  beforeEach(() => {
wrapper = shallow(
  <StoryCardList
    stories={stories}
    onScroll={onScrollMock}
    transitionDuration="2"
    transitionTiming="2"
    setAnimation={setAnimationMock}
    onClick={setAnimationMock}
    animate
  />
);
});


  it('should have scrollable div', () => {
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);
});