9

I have my button inside a component, which calls a method deleteData on click. How do I test the deleteData method is called on the button click in jest?

<Modal.Footer>
  <Button id="trashBtn" onClick={this.deleteData}>Delete</Button>
<Modal.Footer>

deleteData() {
    {/* TODO :*/}
  }
skyboyer
  • 22,209
  • 7
  • 57
  • 64
Sathesh
  • 486
  • 2
  • 12
  • 29
  • 1
    Per the answer by @aravind_reddy, use `simulate()` which is part of the Enzyme API. Under the hood, it is actually just calling the `onClick` prop directly ([see docs](http://airbnb.io/enzyme/docs/api/ShallowWrapper/simulate.html#common-gotchas)). So if you simulate the click on the button and `deleteData` gets called, you can be sure that the method specified by the onClick was called. – Daniel Bank Jul 12 '18 at 03:53

1 Answers1

13

you can do it like this:

I suppose your button is in some component and iam using that component's name as ComponentName

import React from 'react';
import { shallow } from 'enzyme';
import ComponentName from './ComponentName'

describe('Test Button component', () => {
  it('Test click event', () => {

    const component = shallow((<ComponentName />));
    component.find('button').simulate('click');
    //write an expectation here if suppose you are setting state in your deleteData function you can do like this
    component.update();//if you are setting state
    expect(component.state().stateVariableName).toEqual(value you are expecting after setState in deleteData);  
  });
});

Edit: for plain test of function call we can use spyOn:

  it('calls click event', () => {
    const FakeFun = jest.spyOn(ComponentName.prototype, 'deleteData');
    const component = shallow((<ComponentName />));
    component.find('button').simulate('click');
    component.update();
    expect(FakeFun).toHaveBeenCalled();
  });
d_l
  • 3
  • 2
aravind_reddy
  • 5,236
  • 4
  • 23
  • 39
  • Hi, Yes I am able to verify the state changed, But is there a way to test that deleteData method is called, like a isCalled method or similar methods which can test whether a method is being called without testing the state change ? – Sathesh Jul 12 '18 at 03:39
  • i have added an edit you can use spyOn method in jest to spy on your function and then check it is being called or not – aravind_reddy Jul 12 '18 at 03:47
  • Your first code block is technically the better answer. `simulate()` calls the components `onClick` prop under the hood ([see docs](http://airbnb.io/enzyme/docs/api/ShallowWrapper/simulate.html#common-gotchas)) – Daniel Bank Jul 12 '18 at 03:55
  • Hi, Thank you. Spy function worked perfectly, That's what I needed. – Sathesh Jul 12 '18 at 03:56
  • yes but he says he wants to verify the function call some thing like `HaveBeenCalled()` with out testing state. – aravind_reddy Jul 12 '18 at 03:57
  • 1
    I think testing that a function was called is always worse than testing some input/output/side effect since it requires deep knowledge of the internals of what you're testing. I'm not sure why anyone would prefer the second way unless you need to make sure an XHR doesn't go out or something like that. – Ruan Mendes Jul 12 '18 at 03:59
  • yeah i get it... but may he had some other usecase he didnot mention it here – aravind_reddy Jul 12 '18 at 04:02
  • Yeah completely agree with that, but in my usecase, that delete method was a empty todo method which will be implemented in the future. So just wanted to test if that method is being called on the button click for now. – Sathesh Jul 12 '18 at 04:07
  • what about a function that has been defined not in a module but simply inside the – raquelhortab Nov 21 '19 at 11:20
  • @raquelhortab am not sure of it – aravind_reddy Nov 26 '19 at 05:30
  • Can anyone let me know how to test self executing function like {this.renderInstalledCR()} inside render and its definition will be – Alok Ranjan Aug 05 '20 at 08:03