Cómo simular los métodos de React component con jest y enzyme

Tengo un componente react (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() llama a searchDish con el valor proporcionado.

Para hacer esto me gustaría crear una función mock jest que reemplace el método component.

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 consigo en la consola es SyntaxError:

SyntaxError 

  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)

Así que mi pregunta es, ¿cómo me burlo correctamente ¿métodos de componentes con enzimas?

Author: Cuga, 2017-01-24
Source

3 answers

El método puede ser burlado 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 necesitas llamar .actualice el envoltorio del componente probado para registrar correctamente la función mock.

El error de sintaxis provenía de la asignación incorrecta (debe asignar el método a la instancia). Mis otros problemas provenían de no llamar .update() después de burlarse del método.

 49
Author: Miha Šušteršič,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-20 13:34:15

Debe sustituirse wrapper.update(); por wrapper.instance().forceUpdate();

 3
Author: Aleh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-25 20:48:48

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');
})
 0
Author: Yusufali2205,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-14 21:20:41