Hi we have an internal UI library that has function that renders the JSX.Element provided to it as parameter. Normally I would test this with react-testing-library but that is currently bugged. It works fine in the UI so I am just going to let the team who owns the library fix it. In the mean time as I wait for the fix, I mocked out the function but It’s failing to match my expected jsx element. Any ideas?

Code:

react element:

import { toast } from '@company/alerts/toast'

export const ToastTest = ({title}: {title: string}) => {
   toast(<h1> {title} </h1>)

    return <div testId='toast-location-div'></div>
}

test:

Import React from 'react'
import { ToastTest } from './toast-test'
import { toast } from '@company/alerts/toast'
import { render, waitFor } from 'react-testing-library'

jest.mock('@company/alerts', () => {
   ...jest.requireActual('@company/alerts'),
   toast: jest.fn()
}

const TestTitleComponent = ({title}) => <h1> {title} </h1>

describe('Toast test', () => {
   it('should call toast', async () => {
      render(<ToastTest title="foo" />

      await waitFor(() => {
         expect(toast).toHaveBeenCalledWith(<TestTitleComponent title="foo" />)
      }
   }
}

Error:

expect(jest.fn()).toHaveBeenCalledWith(...expected)
    - Expected
    + Received

    - <h1> foo </h1>
    + <h1> foo </h1>

It seemed to get the exact same value but I think it’s a reference error though I am not sure how to fix it. Thanks for any help in advance.