Spy method in react component

Question

My component has a method ..

onUpdateProperty = (key, value) => {
  this.state.formData[key] = value;
}

I want to test if after change input, this method is called...

it('on update input should update formData', function () {
  const wrapper = mount(<MyComp.wrappedComponent {...this.minProps} />);
  const spy = spyOn(wrapper.instance(), 'onUpdateProperty');

  expect(spy).not.toHaveBeenCalled();

  const nameInput = wrapper.find('[name="name"]');
  nameInput.simulate('change', {
    target: { name: 'name', value: 'v1' },
  });

  wrapper.update();

  // expect(spy).toHaveBeenCalledWith('name', 'v1');
  expect(spy).toHaveBeenCalled();
});

wrappedComponent is because I use Mobx-react

score 8 · Accepted Answer · answered Apr 30 '17 at 14:06

My advice is to not spy of internal functions of your component but just test the state.

expect(wrapper.state.formData.name).toBe('v1)

if you really want to spy on it you have to spy on the prototype of you component.

jest.spyOn(MyComp.wrappedComponent.prototype, 'onUpdateProperty')

Spy method in react component

1 Answers1