如何测试与 Jest/react-testing-library 反应的上下文

Question

I am trying to test a component that uses the context, but I couldn't pass a mock value to the context in my tests, here is my setup.

This is my context component:

AuthContext:

export const AuthContext = React.createContext([])
export const AuthProvider = ({children}) => {
const [AllUserInfo, setAllUserInfo] = useState(null)
return <AuthContext.Provider value={{AllUserInfo, setAllUserInfo}}>
{children}
</AuthContext.Provider>
}
export const useAuthContext = () => React.useContext(AuthContext)

I wrapped the App component in index.js with AuthProvider

index.js:

<AuthProvider>
<App/>
</AuthProvider>

Now in another component get the context like this:

ContactUs:

const ContactUs = () => {
const {AllUserInfo} = useAuthContext()
console.log(AllUserInfo)

The code is very long so I just copied the important part like how I call my context in my components and it works in my app. When a user is logged in all of the information is then stored in the context that happens in another component.

Here is what I tried in my tests:

const {queryByTestId} = render(
<AuthProvider.Provider value={userMock}>
<ContactUs />
</AuthProvider.Provider>
);

userMock is just an object that contains mock user information for the test. I may be doing this test completely wrong. I am open to any solutions, it doesn't have to be similar to the test I wrote.

Answer 1

the solution was very simple, here what worked for me:

const {queryByTestId} = render(
        <AuthContext.Provider value={{AllUserInfo: userMock}}>
            <ContactUs/>
        </AuthContext.Provider>
    )

I map the value of the context I want to change to the mock object I created in my test