如何在React组件类名称中进行断言

Question

我正在尝试使用react-testing-library进行DropDown测试。 这个想法是传递一个ClassName道具，它将连接“ DropDown” + ClassName，它可以是任何字符串。

我已经知道此语法有效：

it("className random string DropDown renders fine", () => {
  const RenderResult = render(
  <DropDown
    id="story1"
    value={undefined}
    label="label1"
    options={options}
    className="Extra"
  />
);
console.log(RenderResult.container.innerHTML);
expect(RenderResult.getByText("label1")).toBeInTheDocument();

}）;

console.log（RenderResult.container.innerHTML）是：

<div class="ClickDropDown Extra" id="story1-wrapper"><label 
for="story1-button" class="label">label1</label><button 
id="story1-button" class="" aria-label="

...等等，继续打印

it("className random string DropDown renders fine", () => {
    const RenderResult = render(
    <DropDown
    id="story1"
    value={undefined}
    label="label1"
    options={options}
    className="Extra"
    />
    );
    expect(
    RenderResult.querySelector("DropDown Extra")
    ).toBeInTheDocument();
 });

我也尝试过在“ querySelector”位置使用“ getElementsByClassName”，但也无法正常工作。

想法是断言我们期望DropDown的第一个div具有class =“ DropDown Extra”。