title: Testing onClick event on react component using Jasmine
body: <p>I have a React component that has buttons for which the onClick events are bound to functions passed as properties from the parent component, e.g. <code>&lt;Counter counter=0 incrementCounter={incrementFunction} decrementCounter={decrementFunction} /&gt;</code>.</p>
  
  <p>I'm new to unit testing React components so I'm trying to check that the function gets called when clicking on the increment/decrement buttons. For this I'm using Jasmine's spyOn method, but it never seems to catch the function being called.</p>
  
  <p>If I output a console.log in the function I'm using (e.g. <code>let incrementCounter = () =&gt; { console.log("increment!"); };</code>) then I can tell the function is being called when I do <code>TestUtils.Simulate.click(incrementButton);</code>, however the test still won't pass. What am I missing?</p>
  
  <p><strong>Counter.js</strong></p>
  
  <pre><code>import React, { Component, PropTypes } from "react";
  
  class Counter extends Component {
  
    constructor(props) {
      super(props);
    }
  
    render() {
      const { incrementCounter, decrementCounter, counter } = this.props;
      return (
  
          &lt;div&gt;
            &lt;h1&gt;Counter&lt;/h1&gt;
            &lt;p&gt;
              &lt;b&gt;Counter: {counter} times&lt;/b&gt;
              {" "}
              &lt;button onClick={incrementCounter}&gt;+&lt;/button&gt;
              {" "}
              &lt;button onClick={decrementCounter}&gt;-&lt;/button&gt;
            &lt;/p&gt;
          &lt;/div&gt;
  
      );
    }
  }
  
  Counter.propTypes = {
    incrementCounter: PropTypes.func.isRequired,
    decrementCounter: PropTypes.func.isRequired,
    counter: PropTypes.number.isRequired
  };
  
  export default Counter;
  </code></pre>
  
  <p><strong>Counter.test.js</strong></p>
  
  <pre><code>import React from "react";
  import TestUtils from "react/lib/ReactTestUtils";
  import Counter from "./Counter"
  
  describe("Counter", function () {
  
    let renderedComponent = {};
    let heading = {};
    let decrementButton = {};
    let incrementButton = {};
    let incrementCounter = () =&gt; {};
    let decrementCounter = () =&gt; {};
    let counter = 0;
  
    beforeEach(function(){
  
      renderedComponent = TestUtils.renderIntoDocument(
          &lt;Counter incrementCounter={incrementCounter} decrementCounter={decrementCounter} counter={counter} /&gt;
      );
  
      heading = TestUtils.findRenderedDOMComponentWithTag(renderedComponent, "h1");
  
      let buttons = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "button");
  
      decrementButton = buttons[1];
      incrementButton = buttons[0];
  
      this.incrementCounter = incrementCounter;
  
    });
  
    it("renders without problems", function () {
  
      expect(TestUtils.isDOMComponent(heading)).toBe(true);
      expect(heading.innerText).toMatch(/Counter/g);
  
      expect(TestUtils.isDOMComponent(decrementButton)).toBe(true);
      expect(decrementButton.innerText).toMatch(/-/g);
  
      expect(TestUtils.isDOMComponent(incrementButton)).toBe(true);
      expect(incrementButton.innerText).toMatch(/\+/g);
  
    });
  
    it("fires the increment function", function() {
  
      spyOn(this, "incrementCounter");
      TestUtils.Simulate.click(incrementButton);
      expect(this.incrementCounter).toHaveBeenCalled(); // Error: fuction doesn't get called
  
    });
  
  });
  </code></pre>