如何在保留其余值的同时模拟 React Context 提供程序中的单个值

Question

您好，我有一个上下文提供程序，它 returns 像这样：

return (
        <RepeatsSidebarContext.Provider
            value={{
                loading,
                designRepeats,
                handleShowCreateRepeatItem,
                handleShowCreateRepeatItemSmartSelvedge,
                createRepeatItem,
                handleCreateNewRepeat,
                handleCreateSmartSelvedge,
                nextRepeatName,
                handleUpdateRepeat,
                nativeRepeatsIcons,
                handleSortRepeats,
                onRepeatUpdate,
                createSmartSelvedgeItem,
            }}
        >
            {children}
        </RepeatsSidebarContext.Provider>
    );
};

export default RepeatsSidebarProvider;

我只想模拟 designRepeats 值。它会是这样的：

render(<RepeatsSidebarProvider value={{designRepeatsMock}}>
            <RepeatSidebarItem {...props} />
        </RepeatsSidebarProvider>)

但如果我这样做，道具值仅由 designRepeatsvalue 设置，因此其余值将被覆盖。

希望得到一些帮助。谢谢！

Answer 1

在您的组件中，您可以使用通过 useContext 钩子返回的上下文，并根据需要更改 RepeatSidebarItem 的值。

Answer 2

我发现这种方法可以通过使用包装器重新创建提供程序来模拟上下文。

const wrapper = ({ children }) => (
            <RepeatsSidebarContext.Provider
                value={{
                    ...initialStateMock,
                    designRepeatsMock
                }}
            >
                {children}
            </RepeatsSidebarContext.Provider>
        );


    test("myTest",()=>{
render(<RepeatSidebarItem />, {wrapper})
})

如何在保留其余值的同时模拟 React Context 提供程序中的单个值

How to mock a single value in a React Context provider while keeping the rest of values

reactjs

jestjs

react-testing-library

react-context