Tengo un componente de reacción (esto se simplifica para demostrar el problema):
class MyComponent extends Component { handleNameInput = (value) => { this.searchDish(value); }; searchDish = (value) => { //Do something } render() { return(<div></div>) } } Ahora quiero probar que handleNameInput() llame a searchDish con el valor proporcionado.
Para hacer esto, me gustaría crear una función simulada de broma que reemplace el método del componente.
Aquí está mi caso de prueba hasta ahora:
it('handleNameInput', () => { let wrapper = shallow(<MyComponent/>); wrapper.searchDish = jest.fn(); wrapper.instance().handleNameInput('BoB'); expect(wrapper.searchDish).toBeCalledWith('BoB'); }) Pero todo lo que obtengo en la consola es SyntaxError :
Error de sintaxis
at XMLHttpRequest.open (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:458:15) at run_xhr (node_modules/browser-request/index.js:215:7) at request (node_modules/browser-request/index.js:179:10) at DishAdmin._this.searchDish (src/main/react/components/DishAdmin.js:155:68) at DishAdmin._this.handleNameInput (src/main/react/components/DishAdmin.js:94:45) at Object.<anonymous> (src/main/react/tests/DishAdmin.test.js:122:24)
Entonces, mi pregunta es, ¿cómo me burlo adecuadamente de los métodos de componentes con enzimas?
El método se puede burlar de esta manera:
it('handleNameInput', () => { let wrapper = shallow(<MyComponent/>); wrapper.instance().searchDish = jest.fn(); wrapper.update(); wrapper.instance().handleNameInput('BoB'); expect(wrapper.instance().searchDish).toBeCalledWith('BoB'); })También debe llamar a .update en el envoltorio del componente probado para registrar correctamente la función simulada.
El error de sintaxis provenía de una asignación incorrecta (debe asignar el método a la instancia). Mis otros problemas provenían de no llamar a .update() después de burlarse del método.
Debe reemplazarse wrapper.update(); con wrapper.instance().forceUpdate();
La respuesta de @Miha funcionó con un pequeño cambio:
it('handleNameInput', () => { let wrapper = shallow(<MyComponent/>); const searchDishMock = jest.fn(); wrapper.instance().searchDish = searchDishMock; wrapper.update(); wrapper.instance().handleNameInput('BoB'); expect(searchDishMock).toBeCalledWith('BoB'); })