确保从可用的多个选择元素中选择的正确下拉选项

Question

使用

@testing-library/react": "^16.0.1"

，我想知道处理当前情况的正确方法。 我的过滤器窗格是[使用材料UI滤波器插槽，类似于https://codesandbox.io/embed/sm8xtp?module=/src/demo.tsx&fontsize=12]

我的确切过滤窗格是：

中，我无法控制添加“ test-id（s）”来测试我的过滤器。但是我正在通过选择选项并从孩子那里获得父母选择必要的值来努力。 我的代码是我的代码：

    it("should  available the filter pane, once the user clicks on Filter button", async () => {
    const { user } = await mount();
    const filterButtons = screen.getAllByTestId("FilterAltIcon");
    await user.click(filterButtons[0]);
    expect(screen.queryByText("Add filter")).toBeInTheDocument();
    await user.click(screen.getByText("Add filter"));
    const selectColumn = await screen.getByRole("option", {
      name: "Auto update",
    }).parentElement;//parent of first row 1st option
    const selectOperator = await screen.getAllByRole("option", {
      name: "is",
    })[0].parentElement; //parent of first row 2nd option
    const selectValue = await screen.getAllByRole("option", {
      name: "Please select",
    })[0].parentElement;// //parent of first row 3rd option
    selectColumn && (await user.selectOptions(selectColumn, "flagAuto"));
    selectOperator && (await user.selectOptions(selectOperator, "is"));
    selectValue && (await user.selectOptions(selectValue, "A"));
  });

但我的担心是，我如何确保我所做的所有事情都可以使用相同的

row

，因为当我查询时，我也得到了其他许多值。

如何确保我仅从适当的基于行的操作员中选择？
    

I更改了逻辑以选择第一个选项，然后选择类似的其他选项：

screen.getAllByRole("option", {name: "is"})

对我来说很好。