I have a basic UserContext component that passes down two functions -- hasPermissions to check if the current user has certain permission, and userScope which returns the access scope for the current user. Also the current user and function to update the user in the components state is also passed down by this Provider.
export const UserProvider = ({ children }) => {
const [user, setUser] = useState({});
const userScope = useMemo(() => { ... }, [user]);
const hasPermissions = useCallback((permissions) => { ... }, [user]);
return (
<UserContext.Provider
value={{
user,
userScope,
setUser,
hasPermissions
}}
>
{children}
</UserContext.Provider>
);
};
export function useUser() {
return React.useContext(UserContext);
}
How can I test the functions hasPermissions and userScope? Every article I come across about testing React context components focuses on testing the behaviour of a consumer component and how they handle mocked values coming from a Provider and analyzing the output of the DOM. Instead I want to test the return values of these functions defined in UserProvider.
I'm really new to React contexts API so I'm unsure of what the proper testing strategy should be. Should I approach testing this Provider component like any other functional component? Should I move userScope and hasPermission to their own exported functions and test those as straightforward pure functions? I'm just looking for an appropriate testing plan to run with. Thanks!