5 
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指定了 ，则默认为 that，否则默认为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();
  });
});
4

1 回答 1

6

您可以使用默认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 });
于 2018-07-07T00:02:05.227 回答