反应测试库验证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 });

反应测试库验证DOM嵌套错误

react-testing-library validateDOMNesting Error

javascript

unit-testing

reactjs

jestjs

react-testing-library