Digamos que tengo la siguiente aplicación:
class Child extends React.Component { render() { return <button onClick={this.handleChildOnClick}>{this.props.children}</button>; } handleChildOnClick() { this.props.onChildClick('foo'); } } class Parent extends React.Component { render() { return <Child onChildClick={this.handleParentOnClick}>click me</Child>; } handleParentOnClick(text) { this.props.onParentClick(12345); } } class App extends React.Component { render() { return <Parent onParentClick={(num) => console.log(num)} />; } } Me está costando encontrar la forma correcta de Parent el componente principal. El Child y la App no son un problema, pero el Parent ...
Quiero decir, ¿cómo pruebo que un clic en el componente secundario Child la Parent de llamada del clic principal sin:
Child . Parent debe probarse de forma aislada como un render superficial. Child también se probará de forma aislada y si realizo un renderizado de montaje, básicamente estoy probando la devolución de llamada de clic en el Child dos veces.handleParentOnClick en la Parent principal. No debería depender de la implementación exacta de Parent para esto. Si cambio el nombre de la función de devolución de llamada, la prueba se interrumpirá y muy bien podría ser un falso positivo.¿Hay una tercera opción?
Mientras prueba Parent , puede hacer:
import { shallow } from 'enzyme'; import { stub } from 'sinon'; describe('<Parent/>', () => { it('should handle a child click', () => { const onParentClick = stub(); const wrapper = shallow(<Parent onParentClick={onParentClick} />); wrapper.find("Child").prop('onChildClick')('foo'); expect(onParentClick.callCount).to.be.equal(1); // You can also check if the 'foo' argument was passed to onParentClick }); });Creo que esto podría darte una idea.
// Componente
class Child extends React.Component { render() { return <button onClick={this.handleChildOnClick} className="t-btn">{this.props.children}</button>; } handleChildOnClick() { this.props.onChildClick('foo'); } }// Prueba
import { spy, stub } from 'sinon'; import { shallow } from 'enzyme'; describe('Child Component', () => { it('should check handle click', () => { spy(Child.prototype, 'handleChildOnClick'); const onChildClick = stub(); const wrapper = shallow(<Child onChildClick={onChildClick}>); wrapper.find(".t-btn").simulate('click'); expect(Child.prototype.handleChildOnClick.callCount).to.equal(1); }); it('should check onChildClick', () => { const onChildClick = stub(); const wrapper = shallow(<Child onChildClick={onChildClick}>); wrapper.find(".t-btn").simulate('click'); expect(onChildClick.callCount).to.equal(1); }); });Para probar el padre con el componente hijo
import { stub } from 'sinon'; import { shallow } from 'enzyme'; import Child from '../Components/Child'; describe('Parent Component', () => { it('should check handle click', () => { const onParentClick = stub(); const wrapper = shallow(<Parent onParentClick={onParentClick} />); wrapper.find(".t-btn").simulate('click'); expect(Child.prototype.handleChildOnClick.callCount).to.equal(1); }); it('should check onChildClick', () => { const onChildClick = stub(); const wrapper = shallow(<Child onChildClick={onChildClick}>); wrapper.find(Child).prop('onChildClick')('foo'); expect(onParentClick.callCount).to.be.equal(1); }); });El código anterior solo maneja un componente, pero espero que esto pueda darle algo de esencia. Lo siento si la sintaxis se rompe en alguna parte ...