Jest spy on functionality

Munsterberg picture Munsterberg · Feb 24, 2017 · Viewed 92.9k times · Source

I am swapping to Jest from Mocha, and I'm wondering if there is a way to spy on a React method. For example, let's say I have the following method in my component (ignore the sdk library, it just constructs a jQuery Ajax call):

getData() {
    sdk.getJSON('/someURL').done(data => {
        this.setState({data});
    });
}

Using Sinon I would test this by spying on the prototype like so:

it('should call getData', () => {
    sinon.spy(Component.prototype, 'getData');
    mount(<Component />);
    expect(Component.prototype.getData.calledOnce).to.be.true;
});

This would ensure code coverage without mocking the method. Is there similar functionality in Jest?

EDIT: Also, if this functionality doesn't exist, what is the next best strategy for testing API calls?

Answer

Denis Rybalka picture Denis Rybalka · Feb 2, 2018

Actually you can use jest.spyOn jest.spyOn

If method is called when component created use:

import { mount } from 'enzyme'; 

describe('My component', () => {
  it('should call getData', () => {
    const spy = jest.spyOn(Component.prototype, 'getData');
    mount(<Component />);
    expect(spy).toHaveBeenCalledTimes(1)
  });
})

or if you have it in your DOM and method use bind you can use:

import { shallow } from 'enzyme'; 

describe('My component', () => {
  it('should call getData', () => {
    const wrapper = shallow(<Component />);
    const instance = wrapper.instance()
    const spy = jest.spyOn(instance, 'getData');
    wrapper.find('button').simulate('click')
    expect(spy).toHaveBeenCalledTimes(1)
  });
})