title: How to test component with API call in react?
body: <p>I am having trouble with testing react component that fetch data from API and renders on screen. 
  This is the error that I get. </p>
  
  <pre class="lang-js prettyprint-override"><code>     ● Company Details › renders company details with given data
  
      expect(received).toMatch(expected)
  
      Expected substring: "Google"
      Received string:    "no name provided"
  
        18 |     );
        19 | 
      &gt; 20 |     expect(getByTestId('company-name').textContent).toMatch('Google');
           |                                                     ^
        21 |     expect(getByTestId('sponsors-visa').textContent).toMatch('Yes');
        22 |     expect(getByTestId('description').textContent).toMatch('this is a company description');
        23 |   });
  
        at Object.&lt;anonymous&gt; (src/tests/components/company-detail/CompanyDetail.test.js:20:53)
  </code></pre>
  
  <p>My test file <code>CompanyDetail.test.js</code> code :</p>
  
  <pre class="lang-js prettyprint-override"><code>    import React from 'react';
      import CompanyDetail from '../../../components/company-detail/CompanyDetail';
      import { BrowserRouter } from 'react-router-dom';
      import { render } from '@testing-library/react';
      describe('Company Details', () =&gt; {
        let mockData;
        beforeEach(() =&gt; {
          mockData = { match: { params: { id: 4 } } };
          jest.mock('../../../components/effects/use-fetch.effect');
        });
  
        it('renders company details with given data', async () =&gt; {
          const { getByTestId } = render(
            &lt;BrowserRouter&gt;
              &lt;CompanyDetail {...mockData} /&gt;,
            &lt;/BrowserRouter&gt;
          );
  
          expect(getByTestId('company-name').textContent).toMatch('Google');
          expect(getByTestId('sponsors-visa').textContent).toMatch('Yes');
          expect(getByTestId('description').textContent).toMatch('this is a company description');
        });
      });
  </code></pre>
  
  <p>Code that I want to test (<code>CompanyDetail.js</code>) </p>
  
  <pre><code>    import CONSTANTS from '../../constants/constants';
      import { Link } from 'react-router-dom';
      import useFetch from '../effects/use-fetch.effect';
  
      const CompanyDetail = (props) =&gt; {
        const { id } = props.match.params;
        const { name, description, jobs, known_to_sponsor_visa } = useFetch(`${CONSTANTS.BASE_URL}/companies/${id}`);
        return (
          &lt;React.Fragment&gt;
            &lt;Container&gt;
              &lt;Row className="m-2"&gt;
                &lt;Col&gt;
                  &lt;Card&gt;
                    &lt;Card.Body&gt;
                      &lt;Card.Title&gt;
                        &lt;h3 data-testid="company-name"&gt;{name ? name : 'no name provided'}&lt;/h3&gt;
                      &lt;/Card.Title&gt;
                      &lt;Card.Text data-testid="sponsors-visa"&gt;
                        &lt;b&gt;Known to sponsor work visa: &lt;/b&gt;
                        {known_to_sponsor_visa ? known_to_sponsor_visa : 'No data'}
                      &lt;/Card.Text&gt;
                      &lt;Card.Text data-test-id="description"&gt;{description}&lt;/Card.Text&gt;
                    &lt;/Card.Body&gt;
                  &lt;/Card&gt;
                &lt;/Col&gt;
              &lt;/Row&gt;
            &lt;/Container&gt;
          &lt;/React.Fragment&gt;
        );
      };
  
      export default CompanyDetail;
  
  </code></pre>
  
  <p>Just in case if it needs <code>use-fetch.effect.js</code>: </p>
  
  <pre class="lang-js prettyprint-override"><code>    import { useState, useEffect } from 'react';
  
      const useFetch = (url) =&gt; {
        const [dataArray, setData] = useState([]);
  
        useEffect(() =&gt; {
          try {
            const fetchData = async () =&gt; {
              const res = await fetch(url);
              const dataArray = await res.json();
              setData(dataArray.data)
            }
            fetchData();
  
          } catch (err) {
            console.error(err);
          }
        }, [url]);
  
        return dataArray;
      };
  
      export default useFetch;
  </code></pre>
  
  <p>I could test it by sending data via props but I have no idea how can I mock data to test that url to receive id and render it into specific place. Any help would be appreciated. I know why error is there because i have not passed any company name as Google to check. Problem is how can i test that by passing some dummy data . </p>