title: How to Execute a Function Inside a Stateless Component for Testing in Jest and Enzyme
body: <p>I've got a parent component that I've wrapped with Recompose <code>withHandlers</code> HOC. I've got a function called <code>removeGiftHandler</code> that I want to pass down to the child component as a callback that will change the state kept in the props in the parent component (using <code>withState</code>).</p>
  
  <p>I'm currently testing the parent component, specifically the <code>removeGiftHandler</code> function. The problem is that because the function is being passed down to the child component, there's no event for me to simulate. Also if it was a class component I could use <code>wrapper.instance().removeGift(id)</code> and there would be no issue. Given that it is a stateless functional component, this isn't the case.</p>
  
  <p>Here's the code for the component:</p>
  
  <pre><code>const App = ({ addGiftHandler, state: { gifts } }) =&gt; (
      &lt;div&gt;
          &lt;h1&gt;Gift Giver&lt;/h1&gt;
          &lt;ListGroup&gt;
              {map(
                  ({ id }) =&gt; (
                      &lt;ListGroupItem key={id}&gt;
                          &lt;Gift /&gt;
                      &lt;/ListGroupItem&gt;
                  ),
                  gifts
              )}
          &lt;/ListGroup&gt;
          &lt;Button outline onClick={addGiftHandler}&gt;
              Add Gift
          &lt;/Button&gt;
      &lt;/div&gt;
  )
  
  export default compose(
      withEnhancedState(INITIAL_STATE),
      withHandlers({
          addGiftHandler: ({ state: { gifts }, updateState }) =&gt; () =&gt;
              updateState({ gifts: [...gifts, { id: inc(length(gifts)) }] }),
          removeGiftHandler: ({ state: { gifts }, updateState }) =&gt; id =&gt; () =&gt;
              updateState({ gifts: filter(gift =&gt; gift.id !== id, gifts) }),
      })
  )(App)
  </code></pre>
  
  <p>Once <code>removeGiftHandler</code> is properly tested, the plan is to pass it down to the <code>Gift</code> component.</p>
  
  <p>And here's the relevant code for the tests:</p>
  
  <pre><code>import React from 'react'
  import { shallow } from 'enzyme'
  import { length } from 'ramda'
  
  import App from '.'
  
  const getBaseApp = app =&gt;
      app
          .dive()
          .dive()
          .dive()
  
  describe('App', () =&gt; {
      const app = shallow(&lt;App /&gt;)
      const baseApp = getBaseApp(app)
  
          //...
  
          describe('and the user wants to remove the added gift', () =&gt; {
              beforeEach(() =&gt; {
                  //-----&gt; trigger removeGiftHandler somehow &lt;-----
              })
  
              it('removes the gift from `state`', () =&gt; {
                  expect(app.props().state.gifts).toEqual([])
              })
          })
      })
  })
  </code></pre>
  
  <p>Note <code>baseApp</code> is the base component without the Recompose HOCs.</p>
  
  <p>Can someone please help me with this issue?</p>