1

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?

2
  • Imagino que getUsersByType hace un Fetch al server. Deberías ser poder capaz de mockear esa dependencia en tiempo de test con jest para que devuelva una promesa con datos fake. Commented el 10 mar. 2022 a las 20:02
  • Así es @JoseHermosillaRodrigo pero no sé como se haría. Sabes de algún ejemplo o documentación con el que pueda aplicar ese mockeo de datos?
    – Mr Robot
    Commented el 10 mar. 2022 a las 20:07

1 respuesta 1

1

En tu caso te interesa mockear la dependencia que trae los datos del servidor: getUsersByType. Para ello puedes utilizar jest.mock y mockear el módulo (Suponiendo que la función a mockear sea el default export):

import getUserByType from '../path/a/getUsersByType.js';

jest.mock('../path/a/getUsersByType.js');

test('should render user list', () => {
  const list = [{name: 'Bob'}];
  getUsersByType.mockResolvedValue(Promise.resolve(list));
  
  
  // TODO: Renderiza el componente y realiza los asserts
  // ...
});

En el caso de que no sea el default export hay varias formas de hacerlo, una de ellas sería con jest#spyOn:

import api from '../path/a/api.js';

// En el test...
jest.spyOn(api, 'getUsersByType').mockReturnValue(Promise.resolve(list));
3
  • ¡Interesante! En mi caso no es el default export. El fichero está conformado por constantes exportadas, en este caso la de getUserByType es una de ellas
    – Mr Robot
    Commented el 10 mar. 2022 a las 21:36
  • He editado la respuesta incluyendo ese caso. Commented el 10 mar. 2022 a las 21:48
  • 1
    Efectivamente, esta aportación me ha servido de mucho. ¡Gracias y un saludo!
    – Mr Robot
    Commented el 13 mar. 2022 a las 20:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.