Jest模拟滚动后无法查找到ScrollToTop组件元素问题咨询

测试不生效核心有两个问题：

• 组件判断滚动高度用的是window.pageYOffset，但你触发scroll事件时仅设置了scrollY，Jest/jsdom环境下这两个属性不会自动同步
• fireEvent.scroll仅触发绑定的scroll事件回调，不会自动修改window对应的滚动属性值，必须手动给window.pageYOffset赋值后再触发事件

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import ScrollToTop from '../ScrollToTop';

describe('ScrollToTop', () => {
    // 每次测试结束重置pageYOffset，避免污染其他用例
    afterEach(() => {
        window.pageYOffset = 0;
    });

    test('Renders ScrollToTop with aria-label', async () => {
        render(<ScrollToTop aria-label="Go to the top" />);
        // 先手动设置pageYOffset的值为超过阈值的高度
        window.pageYOffset = 1000;
        // 再触发scroll事件执行toggleVisibility逻辑
        fireEvent.scroll(window);
        const testy = await screen.findByLabelText('Go to the top');
        // 用toBeInTheDocument比toBeDefined更符合DOM存在性校验的最佳实践
        expect(testy).toBeInTheDocument();
    });
});

如果你的测试环境jsdom版本较低，修改属性后依然没有触发状态更新，可以在触发scroll事件后加一行await waitFor(() => {})等待React状态更新完成即可。

内容的提问来源于stack exchange，提问作者JohnBonjon