He creado un componente en React, que renderiza su contenido a partir de los datos obtenidos en una API. Cuando los datos llegan, estos los introduzco en el estado local del componente.
A partir de aquí el componente hace uso de ese estado, y utiliza los datos para pintar una lista.
const UserList = ({ type }) => {
const [users, setUsers] = useState([]);
const [usersByType, setUsersByType] = useState([]);
let update = useSelector((state) => state.update);
const getMaxFiveUsers = (users) => {
return users[type].slice(0, 5);
};
useEffect(() => {
getUsersByType().then((users) => {
setUsers(users);
setUsersByType(getMaxFiveUsers(users));
});
}, [update]);
return (
<div className={usersByType.length ? "userlist" : "hidden"}>
<ul>
{usersByType.map((user, i) => {
return (
<li className="userlist__item" key={i}>
<UserCell username={user} userType={type} users={users} />
</li>
);
})}
</ul>
</div>
);
};
export default UserList;
El problema está que quiero testear este componente con Jest, y al renderizarlo, el componente no tiene valores en su estado y por tanto me devuelve una lista vacía.
¿Se puede setear su estado al iniciar el test para introducir unos usuarios de prueba y así renderizar el listado?