title: React testing library: Test styles (specifically background image)
body: <p>I'm building a React app with TypeScript. I do my component tests with react-testing-library.</p>
  
  <p>I'm buildilng a <a href="https://materializecss.com/parallax.html" rel="noreferrer">parallax</a> component for my landing page.</p>
  
  <p>The component is passed the image via props and sets it via JSS as a background image:</p>
  
  <pre><code>&lt;div
    className={parallaxClasses}
    style={{
      backgroundImage: "url(" + image + ")",
      ...this.state
    }}
  &gt;
    {children}
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the unit test that I wrote:</p>
  
  <pre><code>import React from "react";
  import { cleanup, render } from "react-testing-library";
  import Parallax, { OwnProps } from "./Parallax";
  afterEach(cleanup);
  
  const createTestProps = (props?: object): OwnProps =&gt; ({
    children: null,
    filter: "primary",
    image: require("../../assets/images/bridge.jpg"),
    ...props
  });
  
  describe("Parallax", () =&gt; {
    const props = createTestProps();
    const { getByText } = render(&lt;Parallax {...props} /&gt;);
    describe("rendering", () =&gt; {
      test("it renders the image", () =&gt; {
        expect(getByText(props.image)).toBeDefined();
      });
    });
  });
  </code></pre>
  
  <p>But it fails saying:</p>
  
  <pre><code>● Parallax › rendering › it renders the image
  
      Unable to find an element with the text: bridge.jpg. 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;div
            class="Parallax-parallax-3 Parallax-primaryColor-4"
            style="background-image: url(bridge.jpg); transform: translate3d(0,0px,0);"
          /&gt;
        &lt;/div&gt;
      &lt;/body&gt;
  
        16 |   describe("rendering", () =&gt; {
        17 |     test("it renders the image", () =&gt; {
      &gt; 18 |       expect(getByText(props.image)).toBeDefined();
           |              ^
        19 |     });
        20 |   });
        21 | });
  
        at getElementError (node_modules/dom-testing-library/dist/query-helpers.js:30:10)
        at getAllByText (node_modules/dom-testing-library/dist/queries.js:336:45)
        at firstResultOrNull (node_modules/dom-testing-library/dist/query-helpers.js:38:30)
        at getByText (node_modules/dom-testing-library/dist/queries.js:346:42)
        at Object.getByText (src/components/Parallax/Parallax.test.tsx:18:14)
  </code></pre>
  
  <p>How can I test that the image is being set as a background image correctly with Jest and react-testing-library?</p>