Jest Enzyme prueba un componente React que devuelve nulo en el método de renderizado

3 minutos de lectura

avatar de usuario
klugjo

Tengo un componente que devuelve nulo en el renderizado bajo ciertas condiciones:

render() {
  if (this.props.isHidden) {
      return null;
  }

  return <div>test</div>;
}

Quiero verificar si el componente es nulo cuando isHidden es verdadero con broma y enzima:

describe('myComp', () => {
    it('should not render if isHidden is true', () => {
        const comp = shallow(<myComp isHidden={true} />);
        expect(comp.children().length).toBe(0);
    });
});

Esto funciona, pero ¿hay una forma más idiomática de escribir esta prueba? La prueba de componentes que se representan como nulos es un escenario bastante común.

avatar de usuario
Benjamín Intal

ShallowWrapper tiene un isEmptyRender() función:

expect(comp.isEmptyRender()).toBe(true)

  • La mejor respuesta en mis ojos.

    – Hinrich

    19 de marzo de 2020 a las 14:50

  • @klugjo: esta es una mejor respuesta que la respuesta aceptada. ¿Puedes cambiar la respuesta aceptada?

    – Tomás

    27 de mayo de 2021 a las 17:48

  • Esta respuesta comunica mejor la esencia de la prueba al mismo tiempo que prueba con precisión el resultado.

    – Matt S.

    20 de julio de 2021 a las 6:22

avatar de usuario
Abdennour TOUMI

expect(comp.type()).toEqual(null)

¡Eso es todo!

o:

expect(comp.get(0)).toBeFalsy()

  • Tal vez sea un artefacto de mount versus shallowpero esto no me funcionó, tuve que mirar comp.html() como lo describe @shoaib-nawaz.

    – shawkinaw

    26 de diciembre de 2018 a las 23:08


  • expect(comp.get(0)).toBeFalsy() trabajó para mi. expect(comp.type()).toEqual(null)hizo no.

    – Skromak

    24 de febrero de 2019 a las 19:58

avatar de usuario
Shoaib Nawaz

De acuerdo a ShallowWrapper::html implementación devuelve nulo si el tipo de instancia del componente es nulo, como resultado de render.

expect(comp.html()).toBeNull();

  • Si bien este fragmento de código puede resolver el problema, no explica por qué ni cómo responde la pregunta. Por favor incluye una explicación para tu código, ya que eso realmente ayuda a mejorar la calidad de su publicación. Recuerde que está respondiendo la pregunta para lectores en el futuro, y es posible que esas personas no conozcan los motivos de su sugerencia de código.

    –Luca Kiebel

    26/09/2018 a las 19:26

  • usando Chai, expect(comp.html()).to.eq('') trabajó para mi

    – Pantalones

    1 de julio de 2019 a las 13:37

  • Esto no funcionó para mí, comp.html() devolvió una cadena vacía en mi caso.

    – Hinrich

    19 de marzo de 2020 a las 14:51

usamos lo siguiente con jest-enzyme

expect(comp).toBeEmptyRender()

Como se mencionó en la solución de Benjamin Intal, traté de usar myComponent.isEmptyRender()pero estaba regresando inesperadamente falsea pesar de myComponent.children().length estaba devolviendo 0.

El problema resultó ser que myComponent venía de una llamada a .find() en otro componente renderizado poco profundo. En esta situación, una llamada adicional a .shallow() en el componente secundario encontrado es necesario para obtener isEmptyRender() para funcionar correctamente:

const parentComponent = shallow(<MyParentComponent isMyChildHidden={true} />);
const childComponent = parentComponent.find('MyChildComponent');

expect(childComponent.shallow().isEmptyRender()).toBe(true);

Referencia: https://github.com/enzymejs/enzyme/issues/1278

  • Para mí, llamando poco profundo() en los resultados secundarios no existentes en “El método “superficial” debe ejecutarse en 1 nodo. Se encontró 0 en su lugar”. expect(childComponent.isEmptyRender()).toBe(true) funciona perfectamente bien. [email protected]^3.11.0 & [email protected]^7.1.2

    – Pgarr

    9 dic 2021 a las 10:24

  • Para mí, llamando poco profundo() en los resultados secundarios no existentes en “El método “superficial” debe ejecutarse en 1 nodo. Se encontró 0 en su lugar”. expect(childComponent.isEmptyRender()).toBe(true) funciona perfectamente bien. [email protected]^3.11.0 & [email protected]^7.1.2

    – Pgarr

    9 dic 2021 a las 10:24

¿Ha sido útil esta solución?