title: how to check counter value is incremented or not in react?
body: <p>I make a simple demo of counter where I have two button <code>increment</code> and <code>decrement</code>.demo is working fine . but now I want to test my component. my test case fail when I click on <code>increment button</code> .I am using <code>enzyme</code> and <code>jest</code>.</p>
  <p>here is my code
  <a href="https://codesandbox.io/s/quirky-tharp-ty92o?file=/src/App.test.js" rel="nofollow noreferrer">https://codesandbox.io/s/quirky-tharp-ty92o?file=/src/App.test.js</a></p>
  <p><strong>test case fail</strong></p>
  <pre><code>test(&quot;clicking button increments counter display&quot;, () =&gt; {
    const counter = 7;
    const wrapper = setup(null, { counter });
  
    // find button and click
    const button = findByTestAttr(wrapper, &quot;increment-button&quot;);
    button.simulate(&quot;click&quot;);
  
    // find display and test value
    const counterDisplay = findByTestAttr(wrapper, &quot;counter-display&quot;);
    expect(counterDisplay.text()).toContain(counter + 1);
  });
  </code></pre>
  <p>getting error</p>
  <p><strong>ShallowWrapper::setState() can only be called on class components</strong></p>
  <p><a href="https://i.stack.imgur.com/Jaij1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jaij1.png" alt="enter image description here" /></a></p>