React 测试库：测试子项是否正确传递/呈现答案

【问题标题】：React Testing Library: Test if children are passed / rendered correctlyReact 测试库：测试子项是否正确传递/呈现
【发布时间】：2018-11-10 08:31:48
【问题描述】：

我正在使用 TypeScript 编写一个 React 应用程序。我将 material-ui 用于我的组件和 react-testing-library 用于我的单元测试。

我正在为 material-ui 的 Grid 组件编写一个包装器，以便我始终拥有一个容器。

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 GridContainer extends PureComponent<Props & DefaultProps> {
  static defaultProps: DefaultProps = {
    className: ""
  };

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

export default withStyles(styles)(GridContainer);

我想编写一个测试来检查它的孩子是否正确呈现。这是我写的：

import "jest-dom/extend-expect";
import React from "react";
import { cleanup, render } from "react-testing-library";
import GridContainer, { OwnProps } from "./GridContainer";
afterEach(cleanup);

const createTestProps = (props?: object): OwnProps => ({
  ...props
});

describe("GridContainer", () => {
  const props = createTestProps();
  const { getByTestId } = render(
    <GridContainer {...props}>
      <div data-testid="child" />
    </GridContainer>
  );
  const container = getByTestId("grid-container");
  describe("rendering", () => {
    test("it renders it's children", () => {
      expect(container.children.length).toBe(1);
      expect(getByTestId("child")).toBeDefined();
    });
  });
});

问题是测试的第一部分，我检查孩子通过的长度。但是expect(getByTestId("child")).toBeDefined(); 失败了：

● GridContainer › rendering › it renders it's children

    Unable to find an element by: [data-testid="child"]

    <body />

      24 |     test("it renders it's children", () => {
      25 |       expect(container.children.length).toBe(1);
    > 26 |       expect(getByTestId("child")).toBeDefined();
         |              ^
      27 |     });
      28 |   });
      29 | });

      at getElementError (node_modules/dom-testing-library/dist/query-helpers.js:30:10)
      at getAllByTestId (node_modules/dom-testing-library/dist/queries.js:231:45)
      at firstResultOrNull (node_modules/dom-testing-library/dist/query-helpers.js:38:30)
      at getByTestId (node_modules/dom-testing-library/dist/queries.js:241:42)
      at Object.getByTestId (src/components/Grid/GridContainer/GridContainer.test.tsx:26:14)

不能给渲染函数中的元素一个 data-testid 吗？我如何测试孩子是否正确渲染？

编辑这是调试的输出：

● Console

    console.log node_modules/react-testing-library/dist/index.js:57
      <body>
        <div>
          <div
            class="MuiGrid-container-2 GridContainer-grid-1 "
            data-testid="grid-container"
          >
            <div
              data-testid="child"
            />
          </div>
        </div>
      </body>

【问题讨论】：

你想要做的应该是可能的。您可以尝试记录debug 的输出吗？
@Gpx 我编辑了问题并发布了输出。 div 是正确的！
很奇怪。你可以尝试在codeandbox上发布代码吗？
@gpx 当然，这里是：codesandbox.io/s/526l1j14pp。我还包括了我目前正在使用的解决方法。

标签： reactjs typescript unit-testing jestjs react-testing-library

【解决方案1】：

问题是您在 describe 块中渲染一次。这可能不像你想的那样工作。 describe 块中的代码不在 test（或其他像 beforeEach 的笑话函数）中的代码会被 Jest 提前运行。通常，您永远不希望在 describe 块内但在 test（或其他笑话函数）之外的任何代码。

您可以在 beforeEach 中渲染组件，也可以在每个测试中调用渲染助手函数。

我使用上述方法在此处分叉了您的沙箱，现在两个测试都通过了：https://codesandbox.io/s/v3wk1vlx3l

【讨论】：