title: How to create a mock POST request to test if page has changed
body: <p>I have an App.js file that contains a form that when on submitted, causes triggers a state change to render a new page. I'm trying to create a mock Jest test that does these steps:</p>
  <ol>
  <li>Take mock data</li>
  <li>Sends a POST request like addInfo is doing</li>
  <li>Checks if &quot;DONE WITH FORM&quot; is rendered onto the screen.</li>
  </ol>
  <p>I also had an idea that we could just fill out a form that takes in the valid_address and valid_number and click a button that triggers the addInfo function to run with the information passed in however I'm unsure of that method and it leads me to a CORS error.</p>
  <p>From what I've seen on the web, I think mocking this addInfo using Jest and then testing what is rendered is the best way to go however I'm completely stuck on building this test.</p>
  <p>Here's what I have for my App.js</p>
  <pre><code>const addInfo = async (formInfo) =&gt; {
      try {
        let data = {
          valid_number: formInfo.validNumber,
           valid_address: formInfo.validAddress
        }
  
        let addUserUrl = process.env.REACT_APP_URL +'/verify'
        let addUserData = await fetch(
          addUserUrl,
          { 
            method: &quot;POST&quot;,
            headers: {
              &quot;Content-type&quot;: &quot;application/json&quot;,
              &quot;x-api-key&quot;: process.env.REACT_APP_KEY
            },
            body: JSON.stringify(data)
          }
        )
        if (addUserData.status !== 200) {
          throw 'Error adding User'
        }
  
        let addUserDataJson = addUserData.json()
  
        let ret = {
          added: true,
        }
        return ret
      } catch (error) {
        console.log('Error')
        let ret = {
          added: false,
        }
        return ret
      }
    }
  
  
    const onFinish = async (values: any) =&gt; {
        console.log('Transaction verified');
        let addStatus = await addInfo({
          validNumber: &quot;123434&quot;,
          validAddress: &quot;D74DS8JDSF&quot;,
        })
  
        if (promoStatus.added) {
          setState({
            ...state,
            showPage: false
          })
        } else {
          setState({
            ...state,
            showPage: true
          })
        }
     };
  
  return (
   {!state.showPage &amp;&amp;
            &lt;&gt;
             &lt;div&gt;
                    &lt;p&gt;
                     DONE WITH FORM
                    &lt;/p&gt;
              &lt;div&gt;
            &lt;/&gt;
          }
  )
  
  </code></pre>
  <p>Here's what I've tried in App.test.js:</p>
  <pre><code>it('DONE WITH FORM APPEARS', async() =&gt;{
  
    
              
              // Render App 
            const { getByPlaceholderText, queryByText, getByText } = render(&lt;App /&gt;);
              // Entering Valid Number 
             const validNumberInputBox = getByText('Enter Valid Number);
             fireEvent.change(validNumberInputBox, { target: { value: &quot;123434&quot; } });
             expect(validNumberInputBox).toHaveValue(&quot;123434&quot;);
  
             // Entering Valid Address
             const validAddressInputBox = getByText('Enter Valid Address');
             fireEvent.change(validAddressInputBox, { target: { value: &quot;D74DS8JDSF&quot; } });
             expect(validAddressInputBox).toHaveValue(&quot;D74DS8JDSF&quot;);
             
             
  
             // Button Click
             userEvent.click(screen.getByRole('button', {name: /Submit/i}));
           
            //Check if the DONE WITH FORM is shown 
            expect(await waitFor(() =&gt; getByText('DONE WITH FORM'))).toBeInTheDocument();
      });
  
  </code></pre>
  <p>I've tried almost everything I could find through other stack overflow posts and web articles. so I'd really appreciate any help on how to implement this unit test.</p>