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

Question

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

假设我有一个主页组件，它将在达到页面高度的 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 } })。我错过了什么？请帮忙，先谢谢你了。

Answer 1

• 1-首先您可以创建一个具有固定高度的div/section，然后将其overflow属性设置为滚动。

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

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