Test component with useContext

I have a component that has

useContext()

useContext()

to ask for a context which is created all the way at the top in index.tsx. When I only render the component in my test the index.tsx is also rendered leading to issues like that there is no html etc.

I have now fixed this issue by warpping the component in the test with its own provider like so:

const {container, findByTestId} = render(() => (
                <GlobalContext.Provider value={{oAuthClient: new OAuthClient()}}>
                    <LogoutButton/>
                </GlobalContext.Provider>
            ));

const {container, findByTestId} = render(() => (
                <GlobalContext.Provider value={{oAuthClient: new OAuthClient()}}>
                    <LogoutButton/>
                </GlobalContext.Provider>
            ));

const {container, findByTestId} = render(() => (
                <GlobalContext.Provider value={{oAuthClient: new OAuthClient()}}>
                    <LogoutButton/>
                </GlobalContext.Provider>
            ));

const {container, findByTestId} = render(() => (
                <GlobalContext.Provider value={{oAuthClient: new OAuthClient()}}>
                    <LogoutButton/>
                </GlobalContext.Provider>
            ));

Is this a correct solution?

Test component with useContext

Similar Threads

Similar Threads

Similar Threads