How to mock React component methods with jest and enzyme

63
votes

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.<anonymous> (src/main/react/tests/DishAdmin.test.js:122:24)

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

3
javascriptreactjsjestjsenzyme
What's the syntax error? – Dave Newton
Added to the question :) – Miha Šušteršič
Without knowing precisely what the source is it's impossible to help--I don't see any syntax errors in the code you posted. – Dave Newton
the syntax error comes from wrapper.searchDish = jest.fn(); After changing this line the error does not appear any more, so I am guessing that the mock function is not getting assigned correctly. But I do not know what the correct way is, and whether or not this is available at all. Hence the question – Miha Šušteršič
I don't understand why a function named searchDish is being called here. There is no method in the example with that name. How did we get from searchValue() to searchDish()? – flyingace

3 Answers

104
votes

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.

13
votes

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

0
votes

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