React testing library: Test attribute / prop

by

jest-dom toHaveAttribute assertion asserts item attribute while the test tries to test item prop.

item prop won’t necessarily result in item attribute, and since it’s non-standard attribute it most probably won’t.

react-testing-library propagates functional testing and asserts resulting DOM, this requires to be aware of how components work. As can be seen here, item props results in adding a class to grid element.

All units but tested one should be mocked in unit tests, e.g.:

...
import GridItem, { OwnProps } from "./GridItem";

jest.mock("@material-ui/core/Grid", () => ({
  default: props => <div data-testid="grid-item" className={props.item && item}/>
}));

Then it could be asserted as:

  expect(getByTestId("grid-item")).toHaveClass("item");

Leave a Comment