How to test function that renders text or an icon in Javascript React with Jest?

0
votes

I have this function that outputs a number or an icon and a number to a cell in a table and I need to add a test to check if its rendering. This is my first time doing any test so its completely new for me.

export function alertWithIcon(apiAlertCount) {
  if (apiAlertCount === 0) {
    return formatNumber(apiAlertCount)
  }
  else {
    return <div>
    {formatNumber(apiAlertCount)}
    {formatString("    ")}
      <Icon color="orange" name="exclamation-triangle" title="ALERT" className='row-status-icon' />
    </div> 
  }
}

And I have this test, which fails saying:

"Received value must be an HTMLElement or an SVGElement. Received has type: object Received has value:  <div>—    <Icon __TYPE="Icon" className="row-status-icon" color="orange" name="exclamation-triangle" title="ALERT" /></div>"


  it('Warning Icon for alerts', async() => {
    render(<AuditGrid startDate='2022-01-01' endDate='2022-01-02'/>);
 
    expect(alertWithIcon()).toBeVisible();
  })
javascriptreactjstesting