title: Unable to find an element with the text: "myText" error when using react-testing-library
body: <p>I'm trying to use <code>react-testing-library</code> with React and Jest but one of my tests are failing and I think it has something to do with the regex on the <code>className prop</code> on the test file.</p>
  
  <p>Below I have attached the respectives test &amp; component files.</p>
  
  <p>Also, is there a way to <code>snapshot</code> testing with this library? I feel that my test is not complete for some reason. </p>
  
  <pre><code>// Image.js Component
  
  
  // @flow
  import * as React from "react";
  import styled from "styled-components";
  
  const StyledImage = styled.img`
    max-width: ${props =&gt; props.imageWidth || 100}%;
  `;
  
  type Props = {
    imageAlt: string,
    imageSrc: string | boolean | Function,
    className?: string,
    StyledImage: React.Element&lt;typeof StyledImage&gt;
  };
  
  const Image = (props: Props) =&gt; {
    const { imageAlt, imageSrc, className } = props;
    return (
      &lt;StyledImage
        {...props}
        className={className}
        src={imageSrc}
        alt={imageAlt}
      /&gt;
    );
  };
  
  export default Image;
  
  
  
  // Image.test.js 
  
  
  import React from "react";
  import { render, cleanup } from "react-testing-library";
  import Image from "../Image";
  
  describe("&lt;Image /&gt; component", () =&gt; {
    afterEach(cleanup);
  
    describe("Component as a whole", () =&gt; {
      it("renders the image with a src, alt and a className ", () =&gt; {
        const testProps = {
          imageAlt: "some random string",
          imageSrc: "" /* [ASK]: How to test this */,
          className: "imageDescripton" /* [ASK]: How to test this */
        };
  
        const { getByAltText } = render(&lt;Image {...testProps} /&gt;);
        const { getByText } = render(&lt;Image {...testProps} /&gt;);
  
        const imageAltNode = getByAltText(testProps.imageAlt);
        const imageClassNameNode = getByText(`${testProps.className}`); // [FAIL]: Fails with error.  Unable to find an element with the text: imageDescripton. Regex problem?
  
        expect(imageAltNode).toBeDefined();
        expect(imageClassNameNode).toBeDefined();
      });
    });
  });
  </code></pre>
  
  <p><strong>Complete error log</strong>:</p>
  
  <pre><code>Unable to find an element with the text: imageDescripton. 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.
  
  &lt;body&gt;
    &lt;div&gt;
      &lt;img
        alt="some random string"
        class="imageDescripton Image__StyledImage-sc-1icad3x-0 judnkv"
        src=""
      /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img
        alt="some random string"
        class="imageDescripton Image__StyledImage-sc-1icad3x-0 judnkv"
        src=""
      /&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
    18 |
    19 |       const imageAltNode = getByAltText(testProps.imageAlt);
  &gt; 20 |       const imageClassNameNode = getByText(`${testProps.className}`); // [FAIL]: Fails with error.  Unable to find an element with the text: imageDescripton. Regex problem?
       |                                  ^
    21 |
    22 |       expect(imageAltNode).toBeDefined();
    23 |       expect(imageClassNameNode).toBeDefined();
  </code></pre>