Как насмехаться Методы реактивных компонентов со шуткой и ферментом

У меня есть компонент реакции (это упрощено, чтобы продемонстрировать проблему):

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

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

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

Теперь я хочу проверить, что handleNameInput() вызывает searchValue с предоставленным значением.

Чтобы сделать это, я хотел бы создать функцию jest mock, которая заменяет компонентный метод.

Вот мой тестовый пример:

it('handleNameInput', () => {
   let wrapper = shallow(<MyComponent/>);
   wrapper.searchDish = jest.fn();
   wrapper.instance().handleNameInput('BoB');
   expect(wrapper.searchDish).toBeCalledWith('BoB');
})

Но все, что я получаю в консоли, 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)

Итак, мой вопрос: как я правильно макет компонентов с ферментом?

Ответ 1

Метод можно издеваться таким образом:

it('handleNameInput', () => {
   let wrapper = shallow(<MyComponent/>);
   wrapper.instance().searchDish = jest.fn();
   wrapper.update();
   wrapper.instance().handleNameInput('BoB');
   expect(wrapper.instance().searchDish).toBeCalledWith('BoB');
})

Вам также необходимо вызвать .update на обертке тестируемого компонента, чтобы правильно зарегистрировать функцию mock.

Синтаксическая ошибка исходила от неправильного подсчета (вам нужно назначить метод экземпляру). Мои другие проблемы возникали из-за того, что не вызывали .update() после издевательства над методом.

Ответ 2

@Miha ответ работал с небольшим изменением:

it('handleNameInput', () => {
  let wrapper = shallow(<MyComponent/>);
  const searchDishMock = jest.fn();
  wrapper.instance().searchDish = searchDishMock;
  wrapper.update();
  wrapper.instance().handleNameInput('BoB');
  expect(searchDishMock).toBeCalledWith('BoB');
})