I am trying to test onClick of a span tag of a react ponent.

<span id="A" onClick={this.changeImage}> Image A</span>

Want to test if 'onClick' the 'changeImage' function is being called or not!

// test.js

describe('Tests', () => {
const wrapper = shallow(<Image />);
it('Should render without exploading', () => {
    expect(wrapper).toHaveLength(1);
});

it('Should call changeImage() function on click', () => {
    wrapper.instance().changeImage = jest.fn();
    wrapper.update();
    wrapper.find('#A').simulate('click', { target: { id: 'A' } });
    expect(wrapper.instance().changeImage).toHaveBeenCalled();
    });
});

Also tried this -

it('Should call changeImage() function on click', () => {
    const spy = jest.spyOn(wrapper.instance(), 'changeImage');
    wrapper.find('#A').simulate('click', { target: { id: 'A' } });
    expect(spy).toHaveBeenCalled();
});

Both returning the same error. // Error

● Tests › Should call changeImage() function on click

expect(jest.fn()).toHaveBeenCalled()

Expected mock function to have been called.

Can someone please point out what am I doing wrong? Thanks.

I am trying to test onClick of a span tag of a react ponent.

<span id="A" onClick={this.changeImage}> Image A</span>

Want to test if 'onClick' the 'changeImage' function is being called or not!

// test.js

describe('Tests', () => {
const wrapper = shallow(<Image />);
it('Should render without exploading', () => {
    expect(wrapper).toHaveLength(1);
});

it('Should call changeImage() function on click', () => {
    wrapper.instance().changeImage = jest.fn();
    wrapper.update();
    wrapper.find('#A').simulate('click', { target: { id: 'A' } });
    expect(wrapper.instance().changeImage).toHaveBeenCalled();
    });
});

Also tried this -

it('Should call changeImage() function on click', () => {
    const spy = jest.spyOn(wrapper.instance(), 'changeImage');
    wrapper.find('#A').simulate('click', { target: { id: 'A' } });
    expect(spy).toHaveBeenCalled();
});

Both returning the same error. // Error

● Tests › Should call changeImage() function on click

expect(jest.fn()).toHaveBeenCalled()

Expected mock function to have been called.

Can someone please point out what am I doing wrong? Thanks.

• javascript
• reactjs
• jestjs
• enzyme

• Possible duplicate of Using Jest to spy on method call in ponentDidMount – Oluwafemi Sule Commented Dec 12, 2017 at 14:55
• @OluwafemiSule Thanks, figured out What I was doing wrong from that link. :) – remelkabir Commented Dec 13, 2017 at 16:25
• Can you try storing a reference to wrapper.instance() instead of calling it multiple times to see if it fixes the problem? I'm wondering if you're getting a new instance every time – Ruan Mendes Commented Dec 15, 2017 at 20:30

1 Answer 1

// fixed mistake

describe('Tests', () => {
it('Should render without exploading', () => {
    const wrapper = shallow(<Image />);
    expect(wrapper).toHaveLength(1);
});

it('Should call changeImage() function on click', () => {
    const spy = jest.spyOn(Image.prototype, 'changeImage');
    const wrapper = shallow(<Image/>);
    wrapper.find('#A').simulate('click', { target: { id: 'A' } });
    expect(spy).toHaveBeenCalled();
    spy.mockClear();//clearing the mock functions
    });    
 });

Putting the wrapper after the jest.spyOn() mock function made the test work.

In the case of mocking function the order of declaring const matters. Spy needs to be declared first then the wrapper. Declaring wrapper before spy will cause this error:

expect(jest.fn()).toHaveBeenCalled()

Expected mock function to have been called.