testing - componentdidmount - ¿Cuándo debe usar render y shallow en las pruebas de Enzyme/React?

react js test

Question

antes de publicar esta pregunta, intenté buscar en sqa stackexchange pero no encontré ninguna publicación sobre shallow y renderizar allí, así que espero que alguien pueda ayudarme aquí.

¿Cuándo debo usar shallow y renderizar en las pruebas de componentes reactivos? Basado en los documentos de airbnb, he hecho algunas opiniones sobre la diferencia de los dos:

1. Dado que Shallow está probando los componentes como una unidad , debería usarse para componentes ''principales''. (ej. Tablas, Envoltorios, etc.)

2. El renderizado es para componentes secundarios.

La razón por la que hice esta pregunta es porque me cuesta trabajo decidir cuál debo usar (aunque los documentos dicen que son muy similares)

Entonces, ¿cómo sé cuál usar en un escenario específico?

Answer 1

La diferencia entre shallow () y mount () es que shallow () prueba los componentes de forma aislada de los componentes secundarios que procesan, mientras que mount () profundiza y prueba los elementos secundarios de un componente. Para shallow () esto significa que si el componente padre representa otro componente que no se puede procesar, entonces se pasará una representación shallow () en el padre.

Answer 2

Según los docs Enzyme:

mount(<Component />) para la representación completa de DOM es ideal para casos de uso en los que tiene componentes que pueden interactuar con apis DOM, o pueden requerir el ciclo de vida completo para probar completamente el componente (es decir, componentDidMount, etc.)

vs.

shallow(<Component />) para el renderizado Shallow es útil para limitarse a probar un componente como una unidad, y para asegurarse de que sus pruebas no estén confirmando indirectamente el comportamiento de los componentes secundarios.

vs.

render que se usa para representar componentes de reacción a HTML estático y analizar la estructura HTML resultante.

Todavía puede ver los "nodos" subyacentes en un render superficial, así que, por ejemplo, puede hacer algo como este ejemplo (ligeramente artificial) usando AVA como el corredor de especificaciones:

let wrapper = shallow(<TagBox />);

const props = {
    toggleValue: sinon.spy()
};

test(''it should render two top level nodes'', t => {
    t.is(wrapper.children().length, 2);
});

test(''it should safely set all props and still render two nodes'', t => {
    wrapper.setProps({...props});
    t.is(wrapper.children().length, 2);
});

test(''it should call toggleValue when an x class is clicked'', t => {
    wrapper.setProps({...props});
    wrapper.find(''.x'').last().simulate(''click'');
    t.true(props.toggleValue.calledWith(3));
});

Tenga en cuenta que la representación superficial, la configuración de accesorios y la búsqueda de selectores e incluso los eventos sintéticos son compatibles con la representación superficial, por lo que la mayoría de las veces puede usar eso.

Pero no podrá obtener el ciclo de vida completo del componente, por lo que si espera que sucedan cosas en componentDidMount, debe usar mount(<Component />) ;

Esta prueba usa Sinon para espiar el componente del componentDidMount

test.only(''mount calls componentDidMount'', t => {

    class Test extends Component {
        constructor (props) {
            super(props);
        }
        componentDidMount() {
            console.log(''componentDidMount!'');
        }
        render () {
            return (
                <div />
            );
        }
    };

    const componentDidMount = sinon.spy(Test.prototype, ''componentDidMount'');
    const wrapper = mount(<Test />);

    t.true(componentDidMount.calledOnce);

    componentDidMount.restore();
});

Lo anterior no pasará con renderizado superficial o renderizado

render le proporcionará solo el html, por lo que aún puede hacer cosas como esta:

test.only(''render works'', t => {

    // insert Test component here...

    const rendered = render(<Test />);
    const len = rendered.find(''div'').length;
    t.is(len, 1);
});

¡espero que esto ayude!