• [为了方便提问，我做了一些模拟示例，使其更容易理解]*

让我们说，我有这个主页组件，将切换颜色时，达到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
});

好像fireEvent.scroll(window, { target: { scrollY: 800 } })不能使DOM滚动，我错过了什么？请帮助，谢谢。