Reactjs 验证记忆（…）：<；tr>；不能显示为<；的子级；部门>；问题_Reactjs_Jestjs_Material Ui

Reactjs 验证记忆（…）：<；tr>；不能显示为<；的子级；部门>；问题

reactjs jestjs material-ui

Reactjs 验证记忆（…）：<；tr>；不能显示为<；的子级；部门>；问题,reactjs,jestjs,material-ui,Reactjs,Jestjs,Material Ui,我正在我的react.js项目中使用materialui。当我尝试测试我的行组件时，我得到了控制台。错误： Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. 下面是为它生成的快照： <body> <div> <tr class="MuiTableRow-root makeStyles-root-1"

我正在我的

react.js

项目中使用

materialui

。当我尝试测试我的

行

组件时，我得到了

控制台。错误

：

  Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.

下面是为它生成的快照：

<body>
  <div>
    <tr
      class="MuiTableRow-root makeStyles-root-1"
    >
      <td
        class="MuiTableCell-root"
      >
        <button
          aria-label="expand row"
          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiIconButton-label"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
              />
            </svg>
          </span>
          <span
            class="MuiTouchRipple-root"
          />
        </button>
      </td>
      <th
        class="MuiTableCell-root"
        role="cell"
        scope="row"
      >
        <h5
          class="MuiTypography-root MuiTypography-h5"
        >
          Course1
        </h5>
      </th>
      <td
        class="MuiTableCell-root MuiTableCell-alignRight"
      >
        <h5
          class="MuiTypography-root MuiTypography-h5"
        >
          3
        </h5>
      </td>
    </tr>
    <tr
      class="MuiTableRow-root"
    >
      <td
        class="MuiTableCell-root"
        colspan="6"
        style="padding-bottom: 0px; padding-top: 0px;"
      />
    </tr>
  </div>
</body>

tr

元素必须有父

table

元素。因此，用表包装组件将解决这个问题

tr

不能是div元素的后代。

tr

元素必须有父

table

元素。因此，用表包装组件将解决这个问题

tr

不能是div元素的后代。

在演示中，行被包装在表头或表体元素中，您还需要在组件中添加有效的上下文

tr

元素所处的上下文：

作为thead元素的子元素。
作为tbody元素的子元素。
作为tfoot元素的子元素。
作为table元素的子元素，在任何caption、colgroup和thead元素之后，但仅当不存在作为table元素的子元素的tbody元素时

父级

div

不是来自自定义

行

组件，而是来自演示中呈现

的位置。行被包装在表头或表体元素中，您还需要在组件中添加有效上下文

tr

元素所处的上下文：

父级

div

不是来自您的自定义

行

组件，而是来自您渲染

的位置，我理解这一点。但我的另一个组件中包含了所有这些，该组件包含

行

。另一个组件的快照看起来是这样的：

>所以现在当我只想测试行时出现了问题，因为测试不知道包装表元素的其余部分……我不知道如何测试它。如果您的DOM结构在其他方面是有效的，您可以忽略错误或在测试运行程序中的有效上下文中装载组件。好的，我忘记了我可以在测试中的

render（）

方法中添加一些html标记。我已经创建了一个包装器，它添加了

和

。我补充了我问题的更新部分，我理解。但我的另一个组件中包含了所有这些，该组件包含

行

。另一个组件的快照看起来是这样的：

render（）

方法中添加一些html标记。我已经创建了一个包装器，它添加了

和

。我添加到问题的更新部分。

<body>
  <div>
    <tr
      class="MuiTableRow-root makeStyles-root-1"
    >
      <td
        class="MuiTableCell-root"
      >
        <button
          aria-label="expand row"
          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiIconButton-label"
          >
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
              />
            </svg>
          </span>
          <span
            class="MuiTouchRipple-root"
          />
        </button>
      </td>
      <th
        class="MuiTableCell-root"
        role="cell"
        scope="row"
      >
        <h5
          class="MuiTypography-root MuiTypography-h5"
        >
          Course1
        </h5>
      </th>
      <td
        class="MuiTableCell-root MuiTableCell-alignRight"
      >
        <h5
          class="MuiTypography-root MuiTypography-h5"
        >
          3
        </h5>
      </td>
    </tr>
    <tr
      class="MuiTableRow-root"
    >
      <td
        class="MuiTableCell-root"
        colspan="6"
        style="padding-bottom: 0px; padding-top: 0px;"
      />
    </tr>
  </div>
</body>

const Wrapper: React.FC = ({ children }) => {
  return (
    <table>
      <tbody>{children}</tbody>
    </table>
  );
};

test('Basic render', () => {
  const component = render(
    <Wrapper>
      <Row course={props} />
    </Wrapper>
  );
  expect(component.baseElement).toMatchSnapshot();
});