title: React testing library: Test attribute / prop
body: <p>I'm writing a React app using TypeScript. I use material-ui for my components and react-testing-library for my unit tests.</p>
  
  <p>I'm writing a wrapper for material-ui's Grid component so that I always have an item.</p>
  
  <pre><code>import Grid from "@material-ui/core/Grid";
  import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
  import React, { PureComponent } from "react";
  import styles from "./styles";
  
  export interface OwnProps {
    className?: string;
  }
  
  export interface Props extends WithStyles&lt;typeof styles&gt;, OwnProps {}
  
  export interface DefaultProps {
    className: string;
  }
  
  export class GridItem extends PureComponent&lt;Props &amp; DefaultProps&gt; {
    static defaultProps: DefaultProps = {
      className: ""
    };
  
    render() {
      const { classes, children, className, ...rest } = this.props;
      return (
        &lt;Grid
          data-testid="grid-item"
          item={true}
          {...rest}
          className={classes.grid + " " + className}
        &gt;
          {children}
        &lt;/Grid&gt;
      );
    }
  }
  
  export default withStyles(styles)(GridItem);
  </code></pre>
  
  <p>I want to write a unit test that checks if <code>item={true}</code>. I tried to use the helper library jest-dom's <code>toHaveAttribute</code> like this:</p>
  
  <pre><code>import "jest-dom/extend-expect";
  import React from "react";
  import { cleanup, render } from "react-testing-library";
  import GridItem, { OwnProps } from "./GridItem";
  afterEach(cleanup);
  
  const createTestProps = (props?: object): OwnProps =&gt; ({
    ...props
  });
  
  describe("Parallax", () =&gt; {
    const props = createTestProps();
    const { getByTestId } = render(&lt;GridItem {...props} /&gt;);
    describe("rendering", () =&gt; {
      test("it renders the image", () =&gt; {
        expect(getByTestId("grid-item")).toHaveAttribute("item", "true");
      });
    });
  });
  </code></pre>
  
  <p>But this test fails with:</p>
  
  <pre><code>● GridItem › rendering › it renders the image
  
      expect(element).toHaveAttribute("item", "true") // element.getAttribute("item") === "true"
  
      Expected the element to have attribute:
        item="true"
      Received:
        null
  
        14 |   describe("rendering", () =&gt; {
        15 |     test("it renders the image", () =&gt; {
      &gt; 16 |       expect(getByTestId("grid-item")).toHaveAttribute("item", "true");
           |                                        ^
        17 |     });
        18 |   });
        19 | });
  
        at Object.toHaveAttribute (src/components/Grid/GridItem/GridItem.test.tsx:16:40)
  
  Test Suites: 1 failed, 3 passed, 4 total
  Tests:       1 failed, 3 passed, 4 total
  Snapshots:   0 total
  Time:        1.762s, estimated 2s
  Ran all test suites related to changed files.
  </code></pre>
  
  <p>How can I test if an element has a certain attribute?</p>