React testing library: Test styles (specifically background image) : <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>
