title: Enzyme/Jest: Hooks can only be called inside of the body of a function component
body: <p>Let's say I have a component like so:</p>
  <pre class="lang-js prettyprint-override"><code>export function Click(props: { counter: number }) {
    const [ counter, setCounter ] = useState(props.counter);
  
    return (
      &lt;header className=&quot;App-header&quot;&gt;
        &lt;h1 data-test=&quot;counter&quot;&gt;{counter}&lt;/h1&gt;
  
        &lt;button onClick={() =&gt; setCounter(counter + 1)}&gt;
          Click me
        &lt;/button&gt;
      &lt;/header&gt;
    );
  }
  </code></pre>
  <p>And my test file is like so:</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { mount } from &quot;enzyme&quot;;
  import App, { Click } from './App';
  
  class Setup&lt;Props&gt; {
    constructor(FunctionComponent: React.FC&lt;Props&gt;, props: Props) {
      return mount(
        &lt;&gt;
          {FunctionComponent(props)}
        &lt;/&gt;
      )
    }
  }
  
  test(&quot;Doesn't work&quot;, () =&gt; {
    const wrapper = new Setup(Click, { counter: 0 });
  
    expect(wrapper.find(`[data-test=&quot;counter&quot;]`)).toHaveLength(1);
  });
  </code></pre>
  <p>This returns an error:
  <code>Hooks can only be called inside of the body of a function component.</code></p>
  <p>But I don't really know how to solve it.
  You see, I can't use a Functional Component because it would ruin the purpose.
  My idea is to create a library to help me write tests, so I'd like to use classes.</p>