El problema:
<Child prop1={this.state.prop1}>¿Cuál es la forma correcta de probar que este proceso está ocurriendo como se esperaba?
Aquí hay un código de ejemplo para aclarar el problema:
//App.js import React, { Component } from 'react'; import Content from './Content'; class App extends Component { constructor(props){ super(props) this.state = { page: 'home', } } gotoAbout(){ this.setState({ page: 'about', }) } render() { return( <Content page={this.state.page} gotoAbout={this.gotoAbout.bind(this)} /> ) } }Como puede ver, el componente principal App pasa una propiedad y una función que puede cambiar el valor de esa propiedad a su componente secundario, Contenido.
El componente Contenido entonces haría algo como esto:
//Content.js import React, { Component } from 'react'; class Content extends Component { constructor(props){ super(props) } gotoAbout() { this.props.gotoAbout() } render(){ if(this.props.page = 'home'){ return( <div> <p>this is the home content</p> <button onClick={this.gotoAbout}></button> </div> ) } else { return( <p>this is the about content</p> ) } } }Lo anterior es un ejemplo simplificado, pero creo que se entiende. ¿Cuál sería la mejor manera de escribir una prueba para este tipo de flujo de componente-prop?
Por lo general, primero empiezo a probar los componentes de forma aislada usando renderizado superficial con su funcionalidad esperada y luego pruebo los componentes con composición.
por ejemplo, para probar el componente de Content
1. probar si se comporta correctamente para props o cambios de estado
2. Pruebe si realiza eventos correctamente, como hacer clic en un botón o cualquier otro evento a través de la simulación.
const wrapper = shallow( <Content page={"home"} gotoAbout={()=>{ console.log("fake goAbout")}} /> ); Ahora compruebe si la estructura renderizada coincide con la esperada para prop page={"home"}
expect(wrapper.containsMatchingElement( <div> <p>this is the home content</p> <button onClick={this.gotoAbout}></button> </div> )).to.equal(true); De manera similar, pruebe para otra page={"about"} si el contenido se muestra correctamente o no.
wrapper.setProps({ page: 'about' }); expect(wrapper.containsMatchingElement( <p>this is the about content</p> )).to.equal(true);Después de eso, puede probar los eventos de clic de botón
clickCount = 0; const wrapper = shallow( <Content page={"home"} gotoAbout={()=>{ clickCount = clickCount + 1;}} /> );Ahora puede verificar si clickCount es mayor que cero, después de simular el evento de clic.
wrapper.find('button').simulate('click'); Después de eso, puede comenzar a probar el componente de la App .
const wrapper = shallow(<App />); const childWrapper = wrapper.find('Content');Después de eso, puede crear otro componente de contenido por separado a través de una representación superficial y hacer coincidir esos dos para obtener la misma estructura html, accesorios, estados, etc.
const twrapper = shallow( <Content page={"home"} gotoAbout={()=>{ console.log("fake goAbout")}} /> ); expect(twrapper.html()).to.equal(childWrapper.html());También puede verificar si prop se pasa correctamente a los elementos secundarios representados:
expect(childWrapper.prop('page')).to.equal("home");También puede haber otra forma mejor disponible para probar los componentes de reacción y estos son solo ejemplos de prueba simples. Enzyme proporciona muchas formas de probar sus componentes y, supongo, no existe una regla estricta y rápida. Pero al menos debe probar la funcionalidad y las características esperadas de su componente.
Además, sus casos de prueba se aseguran de que cualquier cambio nuevo que se realice en el componente no rompa la especificación de su prueba.