web-dev-qa-db-fra.com

React testing library: Test attribute / prop

J'écris une application React en utilisant TypeScript. J'utilise material-ui pour mes composants et react-testing-library pour mes tests unitaires.

J'écris un wrapper pour le composant Grid de material-ui afin d'avoir toujours un élément.

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<typeof styles>, OwnProps {}

export interface DefaultProps {
  className: string;
}

export class GridItem extends PureComponent<Props & DefaultProps> {
  static defaultProps: DefaultProps = {
    className: ""
  };

  render() {
    const { classes, children, className, ...rest } = this.props;
    return (
      <Grid
        data-testid="grid-item"
        item={true}
        {...rest}
        className={classes.grid + " " + className}
      >
        {children}
      </Grid>
    );
  }
}

export default withStyles(styles)(GridItem);

Je veux écrire un test unitaire qui vérifie si item={true}. J'ai essayé d'utiliser la bibliothèque d'aide jest-dom toHaveAttribute comme ceci:

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 => ({
  ...props
});

describe("Parallax", () => {
  const props = createTestProps();
  const { getByTestId } = render(<GridItem {...props} />);
  describe("rendering", () => {
    test("it renders the image", () => {
      expect(getByTestId("grid-item")).toHaveAttribute("item", "true");
    });
  });
});

Mais ce test échoue avec:

● 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", () => {
      15 |     test("it renders the image", () => {
    > 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.

Comment puis-je tester si un élément a un certain attribut?

reactjstypescriptunit-testingjestjsreact-testing-library
6
J. Hesters

jest-domtoHaveAttribute l'assertion affirme l'attribut item pendant que le test tente de tester item prop .

item prop n'aboutira pas nécessairement à l'attribut item, et comme il s'agit d'un attribut non standard, il ne le sera probablement pas.

react-testing-library propage les tests fonctionnels et affirme le DOM résultant, cela nécessite d'être conscient du fonctionnement des composants. Comme on peut le voir ici , item props entraîne l'ajout d'une classe à l'élément de grille.

Toutes les unités, sauf une testée, doivent être simulées lors des tests unitaires, par exemple:

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

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

Ensuite, il pourrait être affirmé que:

  expect(getByTestId("grid-item")).toHaveClass("item");
4
Estus Flask