title: How to unit test a function that return JSX.element?
body: <p>I have a function that accepts a parameter and returns a <code>JSX.Element</code></p>
  
  <pre><code>//title.tsx
  export const getTitle = (pageTitle: string) =&gt; {
      return &lt;title&gt; {pageTitle} &lt;/title&gt;;
  }
  </code></pre>
  
  <p>This is how I'm testing it:</p>
  
  <pre><code>describe('Title component', () =&gt; {    
      test("Title component is rendered", () =&gt; {
          const wrapper = getTitle('abc');
          const expectedText = `abc`;
          const actualText = wrapper; //wrapper.text() does not exists;
          expect(actualText).toContain(expectedText);
      });
  });
  </code></pre>
  
  <p>The test fails with the following output:</p>
  
  <pre><code>Expected value: "abc"
  Received object: &lt;React.Fragment&gt;&lt;title&gt;abc&lt;/title&gt;&lt;/React.Fragment&gt;
  </code></pre>
  
  <p>As per some research, I found a solution on Google, which assumes that the function is part of a class component. The solution requires <a href="https://medium.com/@relasine/testing-component-methods-that-return-jsx-in-react-dc8032e3cf22" rel="nofollow noreferrer"><code>wrapper</code></a> to be an <a href="https://levelup.gitconnected.com/the-basics-of-testing-a-react-component-2ff635c99044" rel="nofollow noreferrer">returned by <code>shallow</code> while passing the class-based component <code>ControlledForm</code>)</a>. This does not apply to my case.</p>
  
  <blockquote>
    <p>How to extract the text value out of <code>JSX.element</code> returned by the function to compare with some expected text?</p>
  </blockquote>
  
  <p>Or is there another way to test such cases?</p>