title: How Can I test a react component based on props value
body: <p>I have this component that is responsible of showing an update message</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { Typography } from '@material-ui/core';
  import { DateTime } from 'luxon';
  
  const LastUpdatedTime = ({ recordedOn }) =&gt; {
    if (!recordedOn) {
      return &lt;&gt;&lt;/&gt;;
    }
    const date = DateTime.fromMillis(recordedOn).toLocaleString();
    return (
      &lt;&gt;
        &lt;Typography data-testid="caption" style={{ color: '#757575' }} variant="caption"&gt;
          {`Last recorded on`}
        &lt;/Typography&gt;
        &lt;Typography data-testid="date" style={{ color: '#757575' }} variant="body2"&gt;
          {`${date}`}
        &lt;/Typography&gt;
      &lt;/&gt;
    );
  };
  
  export default LastUpdatedTime;</code></pre>
  </div>
  </div>
  </p>
  <p>I want to test this component based on props value which is <code>recordedOn</code> and my tests so far are like this</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { render } from '@testing-library/react';
  import LastUpdatedTime from './index'
  
  describe('&lt;LastUpdatedTime /&gt;' ,()=&gt;{
  
      it('should render the date message',()=&gt;{
          const { getByTestId} = render(&lt;LastUpdatedTime recordedOn={1645109616314} /&gt;)
          const captionEl = getByTestId("caption")
          expect(captionEl.textContent).toBe('Last recorded on')
      })
      it('should render the date provided from the component',()=&gt;{
          const {getByTestId} = render(&lt;LastUpdatedTime recordedOn={1645109616314} /&gt;)
          const dateEl = getByTestId("date")
          expect(dateEl.textContent).toBeTruthy()
      })
      it('should render nothing if there was no recordedOn time provided' ,()=&gt;{
          const {getByTestId} =render(&lt;LastUpdatedTime recordedOn={1645109616314} /&gt;)
          const dateEl = getByTestId("date")
          expect(dateEl).toBeNull()
      })
  })</code></pre>
  </div>
  </div>
  </p>
  <p>My problem is in the third test <code>should render nothing if there was no recordedOn time provided</code></p>
  <p>How to do that?</p>