javascript - props - Cómo burlarse de los métodos de los componentes React con broma y enzima

redux

Question

Tengo un componente de reacción (esto se simplifica para demostrar el problema):

class MyComponent extends Component {
    handleNameInput = (value) => {
        this.searchValue(value);
    };

    searchValue = (value) => {
      //Do something
    }

    render() {
        reutrn(<div></div>)
    }
}

Ahora quiero probar que handleNameInput() llama a searchDish con el valor proporcionado.

Para hacer esto, me gustaría crear una función de simulacro de jest 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 consigo 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)

Así que mi pregunta es, ¿cómo simulo adecuadamente los métodos de los componentes con enzimas?

Answer 1

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 evaluación incorrecta (debe asignar el método a la instancia). Mis otros problemas provenían de no llamar a .update() después de .update() del método.

Answer 2

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'');
})

Answer 3

Necesita ser reemplazado wrapper.update(); con wrapper.instance().forceUpdate();