react-testing-library validateDOMNesting 错误

Question

Warning: validateDOMNesting(...): <tbody> cannot appear as a child of <div>.
    in tbody (created by TableBody)
    in TableBody (created by TableBody)
    in TableBody

题：

如何使我的TableBody分量的table元素，而不是默认的div那个react-testing-library用途？

补充资料：

我尝试将选项传递给react-testing-library, render(), 函数，但我似乎无法让它工作。

我还尝试在react-testing-library测试中挖掘以查找示例，但没有找到任何东西。

// react-testing-library

function render(
  ui: React.ReactElement<any>,
  options?: {
    /* You wont often use this, expand below for docs on options */
  },
): RenderResult

来自 react-testing-library 文档

您通常不需要指定选项，但如果您需要，这里有可用选项，您可以将其作为渲染的第二个参数提供。

container：默认情况下，react-testing-library将创建一个div并将其附加div到document.body，这是您的反应组件将被呈现的地方。如果您HTMLElement 通过此选项提供自己的容器，它将不会document.body自动附加到 。

baseElement：如果container指定了，则默认为 ，否则默认为document.documentElement。这用作查询的基本元素以及使用debug().

我使用 Jest 的测试代码：

import React from "react";
import { render, cleanup, fireEvent } from "react-testing-library";

import TableBody from "../TableBody";
import listingDataMock from "../__mocks__/TableBody-listing-data";

afterEach(cleanup);

describe("TableBody", () => {
  test("Snapshot", () => {
    //Arrange--------------
    const listingData = listingDataMock;
    const tableBodyKey = "candidateId";

    const props = {
      listingData,
      tableBodyKey
    };

    const { container } = render(<TableBody {...props} />);

    //Assert---------------
    expect(container).toMatchSnapshot();
  });
});

Answer 1

您可以使用默认react-testing-library容器并使用以下内容包装您的组件table：

const { container } = render(<table><TableBody {...props} /></table>);

您还可以创建一个table元素并将其用作容器，方法是将其传递给选项：

const table = document.createElement('table');
document.body.appendChild(table);
const { container } = render(<TableBody {...props} />, { container: table });