在 React 测试库中设置下拉列表的值

Question

为了测试输入，它的工作原理如下：

  it('test input', () => {
    const { getByTestId, getByLabelText } = render(<MyComponent />);

    const myButton = getByTestId('submit-button');
    expect(myButton).toBeInTheDocument();

    fireEvent.change(getByLabelText('first-name'), {
      target: { value: 'ted' }
    });

    // do something
  });

上述测试是将first-name输入的值设置为“ted”并继续前进。

我想做类似的事情，但要使用下拉选择器。

这是组件：

<SelectInput
  label='my-dropdown'
  onChange={onChange}
  options={myOptions}
/>;

myOptions 是这个形状的数组：

const myOptions = [
  { id: '0', name: 'zero' },
  { id: '1', name: 'one' },
  { id: '2', name: 'two' }
];

它在应用程序中运行良好，这部分没有错误。

这里是测试，我做了一些但没有用：

  it('test dropdpwn', () => {
    const { getByTestId, getByLabelText } = render(<MyComponent />);

    const saveButton = getByTestId('submit-button');
    expect(saveButton).toBeInTheDocument();

    fireEvent.change(getByLabelText('my-dropdown'), {
      target: { value: { id: '0', name: 'zero' } }
    });

    // do something
  });

上面的代码不起作用，它没有使用该值设置下拉菜单。

关于如何解决这个问题的任何想法？不确定它是否重要，但所有这些输入都在 react-hook-form 中，最后它应该测试 onSubmit 是否正常工作（只有在设置了所有输入时才有效）。

Answer 1

所以，由于选择行为是使用按钮和跨度来实现的。

您需要先单击按钮，该按钮会在屏幕上显示所有选项，然后您需要单击其中一个选项。

然后您终于可以测试所选选项现在是否在屏幕上。

it("test dropdpwn", async () => {
  const { getByTestId, getByLabelText } = renderWithClientInstance(
    <MapSignalModal title={title} open={true} toggle={toggle} />
  );

  userEvent.click(screen.getAllByTestId("selectButton")[0]);
  userEvent.click(screen.getByText("sensor pool 1"));

  expect(
    await screen.findByText(screen.getByText("sensor pool 1"))
  ).toBeInTheDocument();
});

另外，为了确保您可以尝试以下操作，这应该会失败，因为“传感器池 1”选项最初不在屏幕上。

当文本更改为“传感器池 0”时它应该会通过，因为它最初就在屏幕上。

it("test dropdpwn", async () => {
  const { getByTestId, getByLabelText } = renderWithClientInstance(
    <MapSignalModal title={title} open={true} toggle={toggle} />
  );

  expect(screen.getByText("sensor pool 1")).toBeInTheDocument();
  // if you replace the above text to "sensor pool 0", it should work
});