javascript - Jest getReversedNavigationSections 为 null

Question

我有一个滚动 handle ，如下所示:

handleOnScroll = () => {
    const {form, navigationSections} = this.props;

    const reversedSections = this.getReversedNavigationSections();

    const OFFSET_TOP = form === 'createIdentity' ? 34 : 140;
    const st = window.pageYOffset || document.documentElement.scrollTop; 

    if (st > window.lastScrollTop) {
        for (let i = 0; i < navigationSections.length; i += 1) {
            if (document.getElementById(navigationSections[i].id).getBoundingClientRect().top <= OFFSET_TOP) {
                this.setNavigationActiveWithDebounce(navigationSections[i].id);
            }
        }

    } 

    if (st < window.lastScrollTop) {
        for (let y = 0; y < reversedSections.length; y += 1) {
            if (document.getElementById(navigationSections[y].id).getBoundingClientRect().top <= OFFSET_TOP) {
                this.setNavigationActiveWithDebounce(navigationSections[y].id);
            }
        }
    }

    window.lastScrollTop = st <= 0 ? 0 : st;

}

并对其进行测试，如下所示:

    it('should handle handleOnScroll', () => {
        window.lastScrollTop = 200;
        window.pageYOffset = 50;

        instance.handleOnScroll();

        expect(instance.getReversedNavigationSections).toHaveBeenCalled();
    });

我希望这个测试能够通过(至少对于“getReversedNavigationSections”)，但是我得到:

Answer 1

首先，您是否尝试过调试此测试？

您收到该错误的事实意味着此处出现了问题。

document.getElementById(navigationSections[i].id)

这意味着您根本没有获得该元素。

由于无法看到其余的实现，我最初的猜测是您正在将虚拟 DOM 操作与直接 DOM 操作拼接在一起，并且在混合中丢失了一些内容，但我无法根据代码片段来判断。