Testing span appearance using testing library

Question

I'm quite newbie for the testing library. I already find out how to test the span appearance with the element but seems there's no answer of it.

I have an example that I want to test the complete element <span>textwashere</span> which is I test like below.

getByText is only for text but, the content.element is html element with text which is gives an error to the test.

 it('should have a span in the document', () => {
    const content = {
      element: <span>textwashere</span>
    }
    const { container } = render(
       <div>
         <span>textwashere</span>
       </div>
    )
    expect(screen.getByText(content.element)).toBeInTheDocument()
})

Anyone knows to fix it ?

Answer 1

I fixed this by adding data-testid property to the span, and then simply getByTestId('name').toBeInTheDocument().