如何使用fireEvent.scroll检测scrollPosition?- 反应测试库

how to detect scrollPosition with fireEvent.scroll? - React-testing-library

提问人:Devin Ekadeni 提问时间:6/14/2020 更新时间:3/17/2023 访问量:4957

问:

[出于提问目的,我制作了虚拟示例以使其更容易理解]

假设我有这个主页组件,当达到页面高度的 1/3 时,它将切换颜色。

// Homepage.js
const Home = (props) => {
  const [toggle, setToggle] = useState(false)

  useEffect(() => {
    window.addEventListener('scroll', handleScroll)

    return () => window.removeEventListener('scroll', handleScroll)
  }, [toggle])

  const handleScroll = () => {
    const scrollPosition = document.documentElement.scrollTop;
    const oneThirdPageHeight = (1 / 3) * document.documentElement.offsetHeight;

    if (scrollPosition > onethirdPageHeight) {
      return setToggle(true)
    }
    return setToggle(false)
  }

  return <div style={{ height: '1500px', color: toggle ? 'blue' : 'red'}}>hello</div>
}

和测试文件

// Homepage.test.js
test('should toggle color when scrolled', () => {
  const { getByText } = render(<Homepage />);
  const DivEl = getByText('hello');

  expect(DivEl).toHaveStyle('color: red');
  fireEvent.scroll(window, { target: { scrollY: 800 } });
  expect(DivEl).toHaveStyle('color: blue'); // --> failing
});

似乎我不能通过做来滚动 DOM.我错过了哪里?请帮忙,先谢谢你。fireEvent.scroll(window, { target: { scrollY: 800 } })

javascript reactjs dom 滚动 react-testing-library

评论

0赞 0x5929 8/25/2022
你在滚动方面有运气吗?

答:

0赞 aLiRaam 3/11/2023 #1
  • 1- 首先,您可以创建一个具有固定高度的 div/section,然后将其溢出属性设置为 scroll。

  • 2- 向 div 添加一些内容,并使用 scrollTop 属性以编程方式滚动它。

  • 3- 您可以在 div/section 上触发滚动事件并检查 scrollTop 值