title: How can I test if a prop is passed to child?
body: <p>My component looks something like this: (It has more functionality as well as columns, but I have not included that to make the example simpler)</p>
  <pre><code>const WeatherReport: FunctionComponent&lt;Props&gt; = ({ cityWeatherCollection, loading, rerender }) =&gt; {
    /* some use effects skipped */
    /* some event handlers skipped */
  
    const columns = React.useMemo(() =&gt; [
      {
        header: 'City',
        cell: ({ name, title }: EnhancedCityWeather) =&gt; &lt;Link to={`/${name}`} className=&quot;city&quot;&gt;{title}&lt;/Link&gt;
      },
      {
        header: 'Temp',
        cell: ({ temperature }: EnhancedCityWeather) =&gt; (
          &lt;div className=&quot;temperature&quot;&gt;
            &lt;span className=&quot;celcius&quot;&gt;{`${temperature}°C`}&lt;/span&gt;
            &lt;span className=&quot;fahrenheit&quot;&gt;{` (~${Math.round(temperature * (9 / 5)) + 32}°F)`}&lt;/span&gt;
          &lt;/div&gt;
        )
      },
      {
        header: '',
        cell: ({ isFavorite } : EnhancedCityWeather) =&gt; isFavorite &amp;&amp; (
          &lt;HeartIcon
            fill=&quot;#6d3fdf&quot;
            height={20}
            width={20}
          /&gt;
        ),
      },
    ], []);
  
    return (
      &lt;Table columns={columns} items={sortedItems} loading={loading} /&gt;
    );
  };
  </code></pre>
  <p>Now, I wrote some tests like this:</p>
  <pre><code>jest.mock('../../../components/Table', () =&gt; ({
    __esModule: true,
    default: jest.fn(() =&gt; &lt;div data-testid=&quot;Table&quot; /&gt;),
  }));
  
  let cityWeatherCollection: EnhancedCityWeather[];
  let loading: boolean;
  let rerender: () =&gt; {};
  
  beforeEach(() =&gt; {
    cityWeatherCollection = [/*...some objects...*/];
  
    loading = true;
    rerender = jest.fn();
  
    render(
      &lt;BrowserRouter&gt;
        &lt;WeatherReport
          cityWeatherCollection={cityWeatherCollection}
          loading={loading}
          rerender={rerender}
        /&gt;
      &lt;/BrowserRouter&gt;
    );
  });
  
  it('renders a Table', () =&gt; {
    expect(screen.queryByTestId('Table')).toBeInTheDocument();
  });
  
  it('passes loading prop to Table', () =&gt; {
    expect(Table).toHaveBeenCalledWith(
      expect.objectContaining({ loading }),
      expect.anything(),
    );
  });
  
  it('passes items prop to Table after sorting by isFavorite and then alphabetically', () =&gt; {
    expect(Table).toHaveBeenCalledWith(
      expect.objectContaining({
        items: cityWeatherCollection.sort((item1, item2) =&gt; (
          +item2.isFavorite - +item1.isFavorite
          || item1.name.localeCompare(item2.name)
        )),
      }),
      expect.anything(),
    );
  });
  </code></pre>
  <p>If you check my component, it has a variable called columns. I am assigning that variable to Table component.</p>
  <p>I think, I should test that columns are being passed as props to the Table component. Am I thinking right? If so, can you please tell me how can I write a test case for that?</p>
  <p>Also, it will be helpful if you can suggest me how can i test each cell declared inside columns property.</p>