title: Simulate Click Test with Enzyme/ Jest Not Calling Sinon Spy
body: <p>I have a React application that I'm building and I'm using Enzyme, Jest, and Sinon to test it. I've used sinon.spy() on other components in the app test validate that the onClick method was being called; however, it's not working with this particular component. I also know that onClick is indeed working when I run the app in browser. My test results yield a fail - "Expected: true; Received: false". </p>
  
  <p>This component creates a list of buttons that redirect to a URL. The code for the component is as follows: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import List from "@material-ui/core/List";
  import ListSubheader from "@material-ui/core/ListSubheader";
  import {
    withStyles
  } from "@material-ui/core/styles";
  import Button from "@material-ui/core/Button";
  import Paper from "@material-ui/core/Paper";
  import styles from "./styles";
  
  class ChannelList extends React.PureComponent {
      handleClick = channelURL =&gt; async event =&gt; {
        const {
          history,
          enterChannel
        } = this.props;
        await enterChannel(channelURL);
        history.push(`/chat/${channelURL}`);
      };
  
      render() {
        const {
          classes: {
            channelListContainer,
            channelButtonList,
            channelButton
          },
          channels
        } = this.props;
        return ( &lt;
          div className = {
            channelListContainer
          } &gt;
          &lt;
          Paper &gt;
          &lt;
          List className = {
            channelButtonList
          }
          subheader = { &lt; ListSubheader color = "primary" &gt; Channels &lt; /ListSubheader&gt;} &gt;
            {
              channels.map((channel, index) =&gt; {
                const {
                  name,
                  url
                } = channel;
                return ( 
                &lt;div key = {
                    name + index.toString()
                  } &gt;
                  &lt;Button data - testid = {
                    `${name}${index.toString()}`
                  }
                  onClick = {
                    this.handleClick(url)
                  }
                  className = {
                    channelButton
                  } &gt;
                  { name } 
                  &lt;/Button&gt; 
                &lt;/div&gt;
                );
              })
            } 
            &lt;/List&gt; 
            &lt;/Paper&gt; 
            &lt;/div&gt;
          );
        }
      }
  
      export default withStyles(styles)(ChannelList);</code></pre>
  </div>
  </div>
  </p>
  
  <p>And my test code is as follows: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import {
    shallow
  } from "enzyme";
  import sinon from "sinon";
  import ChannelList from "../ChannelList";
  import List from "@material-ui/core/List";
  import Button from "@material-ui/core/Button";
  
  describe("&lt;ChannelList /&gt;", () =&gt; {
        const props = {
          channels: [{
              name: "test-channel1",
              url: "www.test1.com"
            },
            {
              name: "test-channel2",
              url: "www.test2.com"
            },
            {
              name: "test-channel3",
              url: "www.test3.com"
            }
          ]
        };
  
        let wrapper;
  
        beforeEach(() =&gt; {
            wrapper = shallow( &lt;ChannelList { ...props}/&gt;).dive();
        });
  
          test("handleClick is called when clicking on a list item", () =&gt; {
            const spy = sinon.spy(wrapper.instance(), "handleClick");
            const button1 = wrapper.find({
              "data-testid": "test-channel10"
            }).dive();
            expect(button1).toHaveLength(1);
            console.log(button1.debug());
            button1.simulate("click");
            expect(spy.called).toBe(true);
          });
  });</code></pre>
  </div>
  </div>
  </p>