Simulate a button click in Jest

by

#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);
});

More Related Contents:

  1. How can I use Jest to spy on a method call?
  2. Jest spyOn function called
  3. How to mock React component methods with jest and enzyme
  4. How to mock functions in the same module using Jest?
  5. How do I test axios in Jest?
  6. Jest: Timer and Promise don’t work well. (setTimeout and async function)
  7. Jest – SyntaxError: Cannot use import statement outside a module
  8. How to set initial state for useState Hook in jest and enzyme?
  9. Mock inner axios.create()
  10. Jest matcher to match any one of three values
  11. Is it possible to put test files under pages directory in Next.js?
  12. Enzyme simulate an onChange event
  13. Arrow function without curly braces
  14. Show or hide element in React
  15. How to set focus on an input field after rendering?
  16. Reactjs setState() with a dynamic key name?
  17. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  18. ReactJS – .JS vs .JSX
  19. TypeError: Cannot read property ‘setState’ of undefined
  20. Can Protractor and Karma be used together?
  21. Jest: How to mock one specific method of a class
  22. Is this the correct way to delete an item using redux?
  23. Cleaner/shorter way to update nested state in Redux?
  24. React-router: How to manually invoke Link?
  25. children prop in React component
  26. How to change the behaviour of a mocked import?
  27. Simulate click event on react element
  28. Using JQuery plugins that transform the DOM in React Components?
  29. What is the best way to have a fallback image in NextJS?
  30. Accessing Angular inside Protractor Test

Leave a Comment