Question

我正在编写一个SPA（React）应用程序，我正在使用Redux和Jest来处理该应用程序。现在，在我的reducer中，我确实有一个动作，可以在加载所有内容后从屏幕上删除一些初始HTML（启动画面）。使用window.onload()事件检查此内容。

然而，当我用JEST调用它时，会抛出一个错误，指出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

您可以将callback function设置为您想要的任何内容。所以最简单的方法是将其设置为间谍：

window.onload

如何使用JEST测试浏览器窗口行为？

1 个答案: