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

Question

For testing an input it works like this:

  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
  });

the above test is setting the value of first-name input to "ted" and moves forward.

I want to do something similar but for a drop-down selector.

This is the component:

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

myOptions is an array of this shape:

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

it works fine in the application, no errors from this part.

Here comes the testing of it, I did something but it doesn't work:

  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
  });

the above code doesn't work, it doesn't set the dropdown with that value.

Any ideas on how to solve this? Not sure if it's important, but all those inputs are inside a react-hook-form and at the end it should test that the onSubmit is working (it works only if all inputs are set).

Answer 1

You can try using userEvent.selectOptions , it should work.

I'm assuming that <option> takes the name as its value.

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

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

    userEvent.selectOptions(getByLabelText('my-dropdown'), 'zero')

    // do something
  });