fireevent.scroll在第二次调用时未更新类列表

5jvtdoz2  于 2021-09-08  发布在  Java
关注(0)|答案(0)|浏览(415)

我的react项目中有一个类组件,它表示我的导航栏。我正在使用 window.scrollY 更新布尔状态的步骤 scrolled .
当用户滚动时,类 nav-shadow 应添加到导航栏分区中 className 财产。
代码运行得很好,但是当我一起运行它们时,我的一个测试失败了。
这是我的密码:
appnav.tsx

class AppNav extends Component<any, {scrolled: boolean}> {

    constructor(props: any) {
        super(props);
        this.state = {
            scrolled: false
        };
        this.onScroll = this.onScroll.bind(this);
    }

    onScroll() {
        const scrollY = window.scrollY;
        this.setState({
            scrolled: scrollY >= 75
        });
    }

    componentDidMount() {
        window.addEventListener("scroll", this.onScroll);
    }

    render() {

        return (
            <div aria-label="navigation" className={`${this.state.scrolled ? "nav-shadow" : ""}`}>
                <p>Navbar Code...</p>
            </div>
        );

    }

}

export default AppNav;

appnav.test.tsx

describe("AppNav", () => {
    const { getByLabelText } = renderWithRouter(<AppNav/>);

    const appNav = getByLabelText(/navigation/i);

    // PASS
    it("should be in the document", () => {
        expect(appNav).toBeInTheDocument();
    });

    // PASS
    it("should not have nav-shadow as class if window scroll is less than 75", () => {
        Array.from(Array(74).keys()).forEach(scrollY => {
            fireEvent.scroll(window, {
                target: {
                    scrollY
                }
            });
            expect(appNav.classList.contains("nav-shadow")).toBe(false);
        });
    });

    // FAIL
    // But PASS if ran individually
    it("should have nav-shadow as class if window scroll is more than or equal to 75", () => {
        Array.from(Array(100).keys()).map(i => i + 75).forEach(scrollY => {
            fireEvent.scroll(window, {
                target: {
                    scrollY
                }
            });
            expect(appNav.classList.contains("nav-shadow")).toBe(true);
        });
    });
});

通过测试
应用导航
应该在文档中
如果窗口滚动小于75,则不应将导航阴影作为类
失败的测试
如果窗口滚动大于或等于75,则应将导航阴影作为类
调试代码时,我发现 nav-shadow 当我运行整个测试套件时,没有添加类。但是,当单独运行单个测试时,将添加调用。
我正在使用react测试库和jest的jsdom。

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题