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

itertools recipes

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

容器：默认情况下，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 });

反应测试库validateDOMNesting错误

1 个答案: