title: Unit test failing on Unable to find elements
body: <p>This is first time I am putting unit test together and need some help in understanding why I am getting the following errors.</p>
  <p>A) TestingLibraryElementError: Unable to find an element with the text: Visit my page. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.</p>
  <p>B)expect(received).toBeInTheDocument()</p>
  <p>received value must be an HTMLElement or an SVGElement.
  Received has value: nulL</p>
  <p>c) TestingLibraryElementError: Unable to find an element by: [data-testid=&quot;aboutLink&quot;]</p>
  <p>Here is the piece of test I have in AModal.test.tsx</p>
  <pre><code> import React from &quot;react&quot;;
  import AboutModal from &quot;../../components/AModel&quot;;
  import { render, screen, fireEvent, getByTestId } from &quot;@testing-library/react&quot;;
  
  describe(&quot;About Modal&quot;, () =&gt; {
    it(&quot;loads&quot;, () =&gt; {
      render(&lt;AboutModal /&gt;, {});
      // Make sure the pop up has loaded
      expect(screen.queryByText(&quot;Welcome&quot;)).toBeInTheDocument();
    });
    it(&quot;Checks if link works&quot;, () =&gt; {
  // expect(
      //   screen.queryByText(&quot;Visit the About Page for more info&quot;)
      // ).toBeInTheDocument();  ERROR B is coming here
      const { container } = render(&lt;AboutModal /&gt;, {});
      fireEvent(getByTestId(container, &quot;aboutLink&quot;), new MouseEvent(&quot;click&quot;)); // Error C is coming here
      expect(screen.queryByText(&quot;About my document&quot;)).toBeInTheDocument();
    });
  });
  </code></pre>
  <p>And here is the piece of code from AModel.tsx component class.</p>
  <pre><code>     import { Typography, Button, Modal } from &quot;antd&quot;;
  import React, { useState, useEffect } from &quot;react&quot;;
  import styles from &quot;./MyModal.module.scss&quot;;
  import { RightOutlined } from &quot;@ant-design/icons&quot;;
  import cookie from &quot;react-cookies&quot;;
  import Link from &quot;next/link&quot;;
  
  const MyModal: React.FC = () =&gt; {
    const [visible, setVisible] = useState(false);
    const { Text } = Typography;
    const hide = () =&gt; {
      setVisible(false);
    };
  
    const handleVisibleChange = () =&gt; {
      setVisible(true);
    };
  
    useEffect(() =&gt; {
      const hasVisitedBefore = cookie.load(&quot;hasVisitedBefore&quot;);
      if (cookie &amp;&amp; !hasVisitedBefore) {
        setVisible(true);
        cookie.save(&quot;hasVisitedBefore&quot;, &quot;true&quot;, {});
      }
    }, []);
  
    const content = () =&gt; {
      return (
        &lt;div className={styles.popupcontainer}&gt;
          &lt;div className={styles.popupcontent}&gt;
            &lt;p&gt;Learning Jest?&lt;/p&gt;
            
          &lt;/div&gt;
          &lt;div className={styles.footer} data-testid=&quot;aboutLink&quot;&gt;
            &lt;Link href=&quot;/about&quot;&gt;
              &lt;a&gt;
                &lt;Text strong&gt;
                  Visit the About Page for more info &lt;RightOutlined /&gt;
                &lt;/Text&gt;
              &lt;/a&gt;
            &lt;/Link&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    };
  
    const popUpTitle = &lt;span className={styles.popuptitle}&gt;Welcome&lt;/span&gt;;
  
    return (
      &lt;&gt;
        &lt;Modal
          title={popUpTitle}
          centered
          mask={false}
          className={styles.mystyle}
          bodyStyle={{ overflow: &quot;auto&quot; }}
          onCancel={hide}
          footer={null}
          visible={visible}
        &gt;
          {content()}
        &lt;/Modal&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>export default MyModal;</p>
  <p>Any help with this be appreciated..</p>
  <p>Thanks</p>