javascript - react 测试库验证DOM嵌套错误

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 元素，而不是 react-testing-library< 的默认 div/ 用途？

补充信息:

我尝试将选项传递到 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

From the react-testing-library docs

You wont often need to specify options, but if you ever do, here are the available options which you could provide as a second argument to render.

container: By default, react-testing-library will create a div and append that div to the document.body and this is where your react component will be rendered. If you provide your own HTMLElement container via this option, it will not be appended to the document.body automatically.

baseElement: If the container is specified, then this defaults to that, otherwise this defaults to document.documentElement. This is used as the base element for the queries as well as what is printed when you use 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 });