dimanche 6 décembre 2020

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

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?

Aucun commentaire:

Enregistrer un commentaire