在提供父组件状态的上下文提供程序中测试组件失败答案

【问题标题】：Testing a component within a context provider that provides state of parent component fails在提供父组件状态的上下文提供程序中测试组件失败
【发布时间】：2021-03-17 22:58:52
【问题描述】：

我正在尝试测试嵌入在上下文中的登录组件。应用程序中的提供者：

function App() {
    const [user, setUser] = useState(null);

    const provideUser = useMemo(() => ({user, setUser}), [user, setUser]);

    useEffect(() => {
       getUser().then(res => setUser(res));
    },[])

    return (
        <Router>
            <UserContext.Provider value={provideUser}>
                <Login />
            </UserContext.Provider>
        </Router>
    );
}

getUser() 如果登录则返回一个用户 /null 否则。在登录中，我使用这样的上下文：

function Login () {

    //Login Support
    const { setUser } = useContext(UserContext);

    return (<div>something</div>)

如果我想测试登录组件，我当然要考虑提供者，所以我尝试了以下方法。我构建了一个考虑 App 状态功能的自定义提供程序：

export const UserContext = createContext();

export function UserTestProvider () {
    const [user, setUser] = useState(null);

    const provideUser = useMemo(() => ({user, setUser}), [user, setUser]);

    useEffect(() => {
        getUser().then(res => setUser(res));
    },[])

    return <UserContext.Provider value={provideUser} />
}

我在测试中将我的登录组件包装在其中。

test("Component renders", () => 
   render(<Login />, { wrapper: UserTestProvider });
});

当我运行测试时，我收到错误消息：TypeError: Cannot destructure property 'setUser' of '(0 , _react.useContext)(...)' as it is undefined. 测试中的登录组件根本没有使用 UserTestProvider，而只使用了UserContext = createContext()。

我该如何解决这个问题，或者有更好的方法吗？

【问题讨论】：

你在UserTestProvider()中没有渲染任何东西，试试导出函数UserTestProvider({children}) {return {children}}跨度>

标签： reactjs testing provider use-state use-context

【解决方案1】：

正如@lissettdm 指出的，我当然需要使用这个：

export function UserTestProvider ({children}) {
    const [user, setUser] = useState(null);

    const provideUser = useMemo(() => ({user, setUser}), [user, setUser]);

    useEffect(() => {
        getUser().then(res => setUser(res));
    },[])

    return (
        <UserContext.Provider value={provideUser}>
            {children}
        </UserContext.Provider>
    )
}

然后我可以测试：

render(
    <UserTestProvider>
         <Login />
    </UserTestProvider>
);

【讨论】：