Реагировать на тестирование библиотеки: Тест атрибута / проп - PullRequest
Новая
       10

Реагировать на тестирование библиотеки: Тест атрибута / проп

0 голосов
/ 03 ноября 2018

Я пишу приложение React с использованием TypeScript. Я использую Material-UI для своих компонентов и React-Testing-Library для своих модульных тестов.

Я пишу оболочку для компонента Grid material-ui, чтобы у меня всегда был элемент. 

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);

Я хочу написать модульный тест, который проверяет, если item={true}. Я попытался использовать вспомогательную библиотеку jest-dom's toHaveAttribute следующим образом: 

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");
    });
  });
});

Но этот тест не проходит с: 

● 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.

Как я могу проверить, имеет ли элемент определенный атрибут?

1 Ответ

0 голосов
/ 03 ноября 2018

jest-dom toHaveAttribute утверждение подтверждает item атрибут , пока тест пытается проверить item prop .

item prop не обязательно приведет к атрибуту item, и, поскольку это нестандартный атрибут, он, скорее всего, не будет.

react-testing-library распространяет функциональное тестирование и утверждает полученный DOM, для этого необходимо знать, как работают компоненты. Как можно видеть здесь , item подпирает результаты, добавляя класс к элементу сетки.

Все юниты, кроме протестированных, должны быть проверены в юнит-тестах, например ::1010 * 

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

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

Тогда это можно утверждать как: 

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