Testing a component within a context provider that provides state of parent component fails

Question

I am trying to test my Login Component that is embedded in a Context. Provider in the App:

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() returns a User if logged in /null otherwise. In Login I use the Context like this:

function Login () {

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

    return (<div>something</div>)

If I want to test the Login Component I have to consider the provider of course, so I attempted the following. I build a custom provider that considers the state functionality of 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} />
}

and I wrap my Login Component in it in the test.

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

When I run the test I get the error message: TypeError: Cannot destructure property 'setUser' of '(0 , _react.useContext)(...)' as it is undefined. The Login Component in the test is not using the UserTestProvider at all but using only UserContext = createContext().

How can I fix this, or is there a better way of doing this?

Answer 1

As @lissettdm pointed out I need to use this of course:

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>
    )
}

and then I can test with:

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