NextUI Select组件Jest测试报错问题求助

我使用NextUI创建了一个简单的Select组件，运行正常。但在使用Jest为该组件编写测试时，出现意外错误，无法选中UI中的各类角色。

组件代码 #

import { Select as NextUiSelect, SelectItem } from "@nextui-org/react";

import { SelectProps } from "@/types/Form/formTypes";

export default function Select({ name, label, items, value }: SelectProps) {
    return (
        <NextUiSelect isRequired name={name} label={label} className="mb-4 w-3/4" defaultSelectedKeys={value ? [value] : []} variant="bordered">
            {items.map((item) => (
                <SelectItem key={item.value} value={item.value}>
                    {item.label}
                </SelectItem>
            ))}
        </NextUiSelect>
    );
}

引发问题的测试代码 #

import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import Select from "./Select";

describe("The select component", () => {
    it("should render", () => {
        const items = [
            { value: "1", label: "Yes" },
            { value: "0", label: "No" },
        ];
        render(<Select name="test name" items={items} />);
        const selectElement = screen.getByRole("combobox");

        expect(true).toBe(true);
        expect(selectElement).toBeInTheDocument();
    });
});

运行测试后的警告与错误 #

更换按文本/标签或queryAll查找也无效：

• 警告：If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility
• 错误：TestingLibraryElementError: Unable to find an accessible element with the role "combobox". Available roles: button

组件渲染后的HTML输出 #

Ignored nodes: comments, script, style
    <body>
      <div>
        <div
          class="group flex flex-col transition-background motion-reduce:transition-none !duration-150 group relative justify-end data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)] mb-4 w-3/4"
          data-slot="base"
        >
          <div
            aria-hidden="true"
            data-a11y-ignore="aria-hidden-focus"
            data-testid="hidden-select-container"
            style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
          >
            <input
              required=""
              style="font-size: 16px;"
              tabindex="-1"
              type="text"
              value=""
            />
            <label>
              <select
                name="test name"
                size="2"
                tabindex="-1"
                title=""
              >
                <option />
                <option
                  value="1"
                >
                  Yes
                </option>
                <option
                  value="0"
                >
                  No
                </option>
              </select>
            </label>
          </div>
          <div
            class="w-full flex flex-col"
            data-slot="mainWrapper"
          >
            <button
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-labelledby="react-aria-:r7: "
              class="relative px-3 gap-3 w-full inline-flex flex-row items-center shadow-sm outline-none tap-highlight-transparent border-medium border-default-200 data-[hover=true]:border-default-400 data-[open=true]:border-default-foreground data-[focus=true]:border-default-foreground h-10 min-h-10 rounded-medium transition-colors motion-reduce:transition-none"
              data-slot="trigger"
              id="react-aria-:r2:"
              type="button"
            >
              <div
                class="inline-flex h-full w-[calc(100%_-_theme(spacing.6))] min-h-4 items-center gap-1.5 box-border"
                data-slot="innerWrapper"
              >
                <span
                  class="text-foreground-500 font-normal w-full text-left rtl:text-right text-small truncate"
                  data-slot="value"
                  id="react-aria-:r7:"
                />
              </div>
              <svg
                aria-hidden="true"
                class="absolute right-3 rtl:left-3 rtl:right-[unset] w-4 h-4 transition-transform duration-150 ease motion-reduce:transition-none data-[open=true]:rotate-180"      
                data-slot="selectorIcon"
                fill="none"
                focusable="false"
                height="1em"
                role="presentation"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
                viewBox="0 0 24 24"
                width="1em"
              >
                <path
                  d="m6 9 6 6 6-6"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </body>

更换测试查找方式仍报错，请问这是NextUI的问题还是我的测试写法有误？恳请帮助解决该组件的测试难题。

内容的提问来源于stack exchange，提问作者Ralf