title: Jest - test if function is called if prop is present
body: <p>I want to write a test to see if a useEffect function inside my component is called if the correct prop is passed in.</p>
  <p>PropDetail.js</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  
  function PropDetail({ propID }) {
    
    const [propStatus, setPropStatus] = useState(null);
  
    useEffect(() =&gt; {
      if (!propID) return;
  
      setPropStatus(propID)
  
    }, [propID]);
  
    return &lt;p&gt;{propStatus}&lt;/p&gt;
  }
  
  export default PropDetail;
  </code></pre>
  <p>PropDetail.test.js</p>
  <pre><code>import React from &quot;react&quot;;
  import { shallow } from &quot;enzyme&quot;;
  
  import PropDetail from '../PropDetail'
  
  const props = {  }
  describe('PropDetail', () =&gt; {
    const wrapper = shallow(&lt;PropDetail {...props} /&gt;)
  
    describe('With no propID', () =&gt; {
      it('returns null if no propID passed in', () =&gt; {
        expect(wrapper.html()).toBe(null)
      })
    })
    describe('With propID passed in', () =&gt; {
      beforeEach(() =&gt; {
        wrapper.setProps({ propID: 'PROPID' })
      })
      it('Runs useEffect with propID', () =&gt; {
        expect(wrapper.setPropStatus().toHaveBeenCalledTimes(1);
      })
    })
  })
  </code></pre>
  <p>The errors i'm getting in the console are 'Matcher error: received value must be a mock or spy function' and 'Received has value: undefined'.</p>
  <p>I'm quite new to writing tests so i'm not sure if this is the right starting point or if i'm testing the wrong thing!</p>