React: TestUtils.renderIntoDocument devuelve "null" cuando se pasa un componente funcional válido.

Creado en 10 abr. 2019 · 4Comentarios · Fuente: facebook/react

¿Quieres solicitar una función o informar de un error ?
Quiero informar de un error.

¿Cuál es el comportamiento actual?
Actualmente, cuando se pasa un componente funcional válido a TestUtils.renderIntoDocument , devuelve un valor nulo y no genera ningún error.

Manifestación
Este comportamiento se reprodujo en un sandbox: https://codesandbox.io/s/1zpvll4j24

Compruebe la consola para ver la salida de TestUtils.renderIntoDocument de los componentes de muestra preparados.

Soluciones alternativas
La solución alternativa que satisface tanto a SFC como a FC es envolver el componente en el contenedor:

const FCCounter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

TestUtils.renderIntoDocument(
  <div>
    <FCCounter />
  </div>
);

¿Cuál es el comportamiento esperado?

Renderizar un componente funcional.
En el peor de los casos, proporcionando un error.

¿Qué versiones de React se ven afectadas por este problema?
Versión de reacción: 16.8.6

Test Utils Question

Fuente

DeividasBakanas

Todos 4 comentarios

Los componentes funcionales no tienen ningún instances , entonces, ¿qué esperarías?

TestUtils.renderIntoDocument(<FCCounter/>)

¿regresar?

Además, en términos generales, ¿puede explicar lo que está tratando de hacer? Podría usar forwardRef / useImperativeHandle (https://reactjs.org/docs/hooks-reference.html#useimperativehandle) para obtener acceso a los 'métodos' internos, pero tengo curiosidad por saber qué estás intentando probar en absoluto.

threepointone en 11 abr. 2019

Después de llamar a TestUtils.renderIntoDocument con el componente clásico, estoy completamente habilitado para alcanzar su state , props y manipular el componente usando setState . Entonces, lo que esperaba que TestUtils.renderIntoDocument devolviera es algún objeto que me permitiera usar state , props y setState .

Estoy tratando de probar componentes que se implementan como componentes funcionales. El objetivo principal es cambiar el estado del componente y verificar si el estado cambiado coincide con el estado esperado por la prueba.

En caso de realizar pruebas, tengo una condición previa, que los componentes deben probarse tal cual y no deben modificarse para contener el código específicamente con fines de prueba. Por lo tanto, cambiar el componente para usar forwardRef/useImperativeHandle no es una opción.

DeividasBakanas en 12 abr. 2019

@DeividasBakanas Los componentes de la función no tienen instancias. Puede activar el botón, que actualizaría el estado mediante el envío de un evento. En mi opinión, este también es un enfoque mejor que intentar actualizar imperativamente la instancia devuelta desde TestUtils.renderIntoDocument (en el caso de componentes de clase).

trueadm en 13 abr. 2019

👍1

Como mencionó @trueadm , no recomendamos probar los detalles de implementación del componente en sí, y usar accesorios / eventos para activar actualizaciones y hacer afirmaciones en la salida del componente. Podría recomendar bibliotecas como react-testing-library https://github.com/kentcdodds/react-testing-library para hacer esto un poco más fácil. Kent también escribe extensamente sobre el tema, lo recomendaría.

Cerrando este problema ya que es más una pregunta de uso que una solicitud de error / función.

threepointone en 15 abr. 2019

👍1

¿Fue útil esta página

0 / 5 - 0 calificaciones