如何用玩笑测试浏览器窗口行为？

Question

我正在编写一个SPA (React)应用程序，我正在为应用程序使用Redux和Jest。现在，在我的还原器中，我确实有一个操作，在加载所有内容之后，从屏幕上删除一些初始HTML (splash )。这是通过window.onload()事件检查的。

但是，当我开玩笑地调用它时，会抛出一个错误，说明window.onload不是一个函数。

如何解决这个问题，下面是我的减速机。

export const reduxReducer = (state = initialReducerState, action) => {
        switch (action.type) {
            case ReduxActions.FADE_OUT_AND_REMOVE_SPLASH_SCREEN:
                // Set an event handler to remove the splash screen after the window has been laoded.
                // This ensures that all the content is loaded.
                window.onload(() => {
                    document.getElementsByClassName("splash-screen")[0].classList.add("fade-out");

                    // Set a timeout to remove the splash screen from the DOM as soon as the animation is faded.
                    setTimeout(() => {
                        let splashScreenElement = document.getElementsByClassName("splash-screen")[0];
                        splashScreenElement.parentNode.removeChild(splashScreenElement);

                        let styleElements = document.getElementsByTagName('style');
                        for (let i = 0; i < styleElements.length; i++) {
                            styleElements[i].parentNode.removeChild(styleElements[i]);
                        }
                    }, 500);
                });



           // Returns the updated state.
            return {
                ...state,
                appBootstrapped: false
            }
        default:
            return {
                ...state
            };
    }
};

当然，我的测试文件：

it("Update 'appBootstrapped' to true when the 'FADE_OUT_AND_REMOVE_SPLASH_SCREEN' action is invoked.", () => {
    // Arrange.
    const expectedReduxState = {
        appBootstrapped: true
    };

    // Assert.
    expect(reduxReducer(undefined, { type: FADE_OUT_AND_REMOVE_SPLASH_SCREEN })).toEqual(expectedReduxState);
});

Answer 1

您可以将window.onload设置为任何您想要的。所以最简单的方法就是把它设置成这样的间谍：

global.onload = jest.fn()