Unit Test for Custom React Hook
I am practicing unit testing, I am using a react-testing-library with vitest. I have a custom hook that fetches the user data of the given user id. How can I test it with unit tests I am able to write unit test which actually fetches the data from the API. but is it a good approach? I read each unit test should be done in milliseconds. if we fetch data from server it will take longer. How can I avoid this situation and efficiently test it.
1 Reply
import { useEffect, useState } from "react";
import graphHandler from "../../apollo/graphHandler";
import { GET_USER_GQL } from "../../apollo/ProfileService/QueryRequest";
function useUser(id = "", preLoad = false) {
const [user, setUser] = useState({});
const [loading, setLoading] = useState(preLoad);
useEffect(() => {
if (id) {
getUser(id);
} else {
setUser({});
}
}, []);
const getUser = async (user_id) => {
if (!user_id) return;
setLoading(true);
try {
const { data } = await graphHandler().invoke(
GET_USER_GQL,
{ user_id },
0
);
if (data && data.getUser && data.getUser.user) {
// console.log("getUser Success", data.getUser.user);
setUser(data.getUser.user);
setLoading(false);
} else {
setLoading(false);
setUser({});
}
} catch (error) {
console.error("getUser Error", error);
setUser({});
setLoading(false);
}
};
return { user, loading, getUser, reset: () => setUser({}) };
}
import { useEffect, useState } from "react";
import graphHandler from "../../apollo/graphHandler";
import { GET_USER_GQL } from "../../apollo/ProfileService/QueryRequest";
function useUser(id = "", preLoad = false) {
const [user, setUser] = useState({});
const [loading, setLoading] = useState(preLoad);
useEffect(() => {
if (id) {
getUser(id);
} else {
setUser({});
}
}, []);
const getUser = async (user_id) => {
if (!user_id) return;
setLoading(true);
try {
const { data } = await graphHandler().invoke(
GET_USER_GQL,
{ user_id },
0
);
if (data && data.getUser && data.getUser.user) {
// console.log("getUser Success", data.getUser.user);
setUser(data.getUser.user);
setLoading(false);
} else {
setLoading(false);
setUser({});
}
} catch (error) {
console.error("getUser Error", error);
setUser({});
setLoading(false);
}
};
return { user, loading, getUser, reset: () => setUser({}) };
}
const TEST_USER_ID = "47511b90-3e8f-4059-9429-6eefdd07ed29";
const TEST_USER_SESSION_TOKEN =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiNDFkN2RmYzQtNzgxMC00NDdhLTgzY2MtYmI0NDA5ZWY2Nzg5IiwiZGV2aWNlX2lkIjoiNWQzYWVlNzUtNTFhYi00ZDZjLWE0OWYtOWI3MGFjOWE4N2YzIiwidXNlcl90eXBlIjoiTWFya2V0aW5nIiwibG9naW5fbWV0aG9kIjoiRU1BSUwiLCJpYXQiOjE2OTI3MTE3NjUsImV4cCI6MTY5Mjc5ODE2NX0.Q-ovVN0EgeK-4LVb-v0WDBqWZ1Tqb4VrDWWGP-s13Tc";
let affiliate = undefined;
beforeAll(() => {
ClientProvider.setProfileToken(TEST_USER_SESSION_TOKEN);
});
test("useUser_valid", async () => {
const { result } = renderHook(() => useUser());
await act(async () => {
await result.current.getUser(TEST_USER_ID);
});
const keysLength = Object.keys(result.current.user).length;
expect(keysLength).greaterThan(0);
});
const TEST_USER_ID = "47511b90-3e8f-4059-9429-6eefdd07ed29";
const TEST_USER_SESSION_TOKEN =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiNDFkN2RmYzQtNzgxMC00NDdhLTgzY2MtYmI0NDA5ZWY2Nzg5IiwiZGV2aWNlX2lkIjoiNWQzYWVlNzUtNTFhYi00ZDZjLWE0OWYtOWI3MGFjOWE4N2YzIiwidXNlcl90eXBlIjoiTWFya2V0aW5nIiwibG9naW5fbWV0aG9kIjoiRU1BSUwiLCJpYXQiOjE2OTI3MTE3NjUsImV4cCI6MTY5Mjc5ODE2NX0.Q-ovVN0EgeK-4LVb-v0WDBqWZ1Tqb4VrDWWGP-s13Tc";
let affiliate = undefined;
beforeAll(() => {
ClientProvider.setProfileToken(TEST_USER_SESSION_TOKEN);
});
test("useUser_valid", async () => {
const { result } = renderHook(() => useUser());
await act(async () => {
await result.current.getUser(TEST_USER_ID);
});
const keysLength = Object.keys(result.current.user).length;
expect(keysLength).greaterThan(0);
});