Simulate a button click in Jest

Question

Simulating a button click seems like a very easy/standard operation. Yet, I can't get it to work in Jest.js tests.

This is what I tried (and also doing it using jQuery), but it didn't seem to trigger anything:

import { mount } from 'enzyme';  page = <MyCoolPage />; pageMounted = mount(page);  const button = pageMounted.find('#some_button'); expect(button.length).toBe(1); // It finds it alright button.simulate('click'); // Nothing happens 

Answer 1

#1 Using Jest

This is how I use the Jest mock callback function to test the click event:

import React from 'react'; import { shallow } from 'enzyme'; import Button from './Button';  describe('Test Button component', () => {   it('Test click event', () => {     const mockCallBack = jest.fn();      const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));     button.find('button').simulate('click');     expect(mockCallBack.mock.calls.length).toEqual(1);   }); }); 

I am also using a module called enzyme. Enzyme is a testing utility that makes it easier to assert and select your React Components

#2 Using Sinon

Also, you can use another module called Sinon which is a standalone test spy, stubs and mocks for JavaScript. This is how it looks:

import React from 'react'; import { shallow } from 'enzyme'; import sinon from 'sinon';  import Button from './Button';  describe('Test Button component', () => {   it('simulates click events', () => {     const mockCallBack = sinon.spy();     const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));      button.find('button').simulate('click');     expect(mockCallBack).toHaveProperty('callCount', 1);   }); }); 

#3 Using Your own Spy

Finally, you can make your own naive spy (I don't recommend this approach unless you have a valid reason for that).

function MySpy() {   this.calls = 0; }  MySpy.prototype.fn = function () {   return () => this.calls++; }  it('Test Button component', () => {   const mySpy = new MySpy();   const mockCallBack = mySpy.fn();    const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));    button.find('button').simulate('click');   expect(mySpy.calls).toEqual(1); });