提问人:Devin Ekadeni 提问时间:6/14/2020 更新时间:3/17/2023 访问量:4957
如何使用fireEvent.scroll检测scrollPosition?- 反应测试库
how to detect scrollPosition with fireEvent.scroll? - React-testing-library
问:
[出于提问目的,我制作了虚拟示例以使其更容易理解]
假设我有这个主页组件,当达到页面高度的 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 } })
答:
0赞
aLiRaam
3/11/2023
#1
1- 首先,您可以创建一个具有固定高度的 div/section,然后将其溢出属性设置为 scroll。
2- 向 div 添加一些内容,并使用 scrollTop 属性以编程方式滚动它。
3- 您可以在 div/section 上触发滚动事件并检查 scrollTop 值
评论