title: Test conditional function in component in React with Jest - Method “props” is meant to be run on 1 node. 0 found instead
body: <p>I'm trying to test <code>ListModal.test.js</code>, and keep getting the error saying</p>
  <blockquote>
  <p>Method “props” is meant to be run on 1 node. 0 found instead.</p>
  </blockquote>
  <p>Here we need to test <code>renderFooter</code> function inside of our ListModal.js, and tried a lot of different ways to grab hold of that component and also tried different methods like <code>prop</code> and <code>simulate</code>, but didn't work.</p>
  <p>Please compare the passing and failing test, if that could be helpful.</p>
  <p>Would appreciate any help.</p>
  <p><strong>ListModal.js</strong></p>
  <pre><code>const ListModal = () =&gt; {
  
      const renderFooter = () =&gt; {
          if (path.length === 3) {
              return null;
          }
          const Next = (
              &lt;div className=&quot;RenderFooter__primary-button-wrapper&quot;&gt;
                  &lt;ButtonPrimary
                      className=&quot;RenderFooter__button&quot;
                      disabled={!selectedValue}
                      label={path.length &lt; 2 ? 'Next' : 'Submit'}
                      onClick={() =&gt; dispatch({type: 'NAVIGATE_NEXT'})}
                  /&gt;
              &lt;/div&gt;
          );
          
          return path.length === 1 ? (
              &lt;&gt;{Next}&lt;/&gt;
          ) : (
              &lt;div className=&quot;RenderFooter__content&quot;&gt;
                  &lt;Button
                      className=&quot;RenderFooter__button&quot;
                      label=&quot;Back&quot;
                      onClick={() =&gt; dispatch({type: 'NAVIGATE_BACK'})}
                  /&gt;
                  {Next}
              &lt;/div&gt;
          );
      };
  
      return (
          &lt;Modal
              className=&quot;Modal2021&quot;
              footer={renderFooter()}
              id=&quot;Modal2021&quot;
              isOpen={isOpen}
              onClose={() =&gt; dispatch({type: 'MODAL_CLOSE'})}
              onModalOpen={handleModalOpen}
              onModalClose={() =&gt; {
                  dispatch({type: 'ON_MODAL_CLOSED'});
                  closeReportFlow();
              }}
          &gt;
              &lt;View dispatch={dispatch} state={state} /&gt;
          &lt;/Modal&gt;
      );
  };
  export default ListModal;
  </code></pre>
  <p><strong>ListModal.test.js</strong></p>
  <pre><code>// FAILING TEST
  describe('#NAVIGATE_NEXT', () =&gt; {
      it('should call dispatch with NAVIGATE_NEXT', () =&gt; {
          jest.spyOn(List, 'ListContext').mockImplementation(
              () =&gt; contextValue
          );
          const wrapper = mount(&lt;ReportListingModal /&gt;);
          wrapper.find('ButtonPrimary').prop('onClick')();
          expect(contextValue.dispatch).toHaveBeenCalledWith({type: 'NAVIGATE_NEXT'});
      });
  });
  
  // PASSING TEST
  describe('#ON_MODAL_CLOSED', () =&gt; {
      it('should call dispatch with ON_MODAL_CLOSED', () =&gt; {
          jest.spyOn(Listing, 'ListContext').mockImplementation(
              () =&gt; contextValue
          );
          const wrapper = mount(&lt;ReportListingModal /&gt;);
          wrapper.find('Modal').prop('onModalClose')();
  
          expect(contextValue.dispatch).toHaveBeenCalledWith({type: 'ON_MODAL_CLOSED'});
      });
  });
  </code></pre>