How to mock React component methods with jest and enzyme

JavascriptReactjsJestjsEnzyme

Javascript Problem Overview


I have a react component(this is simplified in order to demonstrate the issue):

class MyComponent extends Component {
    handleNameInput = (value) => {
        this.searchDish(value);
    };
    
    searchDish = (value) => {
      //Do something
    }

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

Now I want to test that handleNameInput() calls searchDish with the provided value.

In order to do this I would like to create a jest mock function that replaces the component method.

Here is my test case so far:

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

But all I get in the console is 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. (src/main/react/tests/DishAdmin.test.js:122:24)

So my question is, how do I properly mock component methods with enzyme?

Javascript Solutions


Solution 1 - Javascript

The method can be mocked in this way:

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

You also need to call .update on the wrapper of the tested component in order to register the mock function properly.

The syntax error was coming from the wrong assingment (you need to assign the method to the instance). My other problems were coming from not calling .update() after mocking the method.

Solution 2 - Javascript

Needs to be replaced wrapper.update(); with wrapper.instance().forceUpdate();

Solution 3 - Javascript

@Miha's answer worked with a small change:

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMiha ŠušteršičView Question on Stackoverflow
Solution 1 - JavascriptMiha ŠušteršičView Answer on Stackoverflow
Solution 2 - JavascriptAlehView Answer on Stackoverflow
Solution 3 - JavascriptYusufali2205View Answer on Stackoverflow