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