How to test dropdown component with React Testing Library

[emilio0281]

Hi,
I am trying to test a dropdown component with React Testing Library. I need to set the value of the component, but I cant get the node with the query selectors provided by React Testing Library.

Component Generated Code:

Code: Select all

<Dropdown
          id="activity"
          name="activity"
          options={[
            { label: "Option Label", value: "Option Value" },
          ]}
          optionLabel="label"
          value={state?.activity}
          onChange={(e) => handleChangeState(e.target.name, e.target.value)}
        />

I am trying this, but didn't works

Code: Select all

fireEvent.input(
      screen.getByRole("combobox", { name: /activity/i, hidden: true }),
      {
        target: { value: "Option Value" },
      }
    );

NOTE: I can find the hidden input, but I am unable to select any of them.

[mcandu]

Hi, I'll check and get back to you as soon as possible.

[traitano]

I have a custom component with a <label> and a <Dropdown>. I find the label, find its parent, then query using within.

Code: Select all

// myDropdown.js

<div>
  <label id="test">{"LABEL GOES HERE"}</label>
  <Dropdown
    options={['Apple', 'Orange', 'Banana']}
    placeholder={placeholder}
  />
</div>

Code: Select all

// myDropdown.test.js

userEvent.click(
  within(screen.getByText('LABEL GOES HERE').parentElement).getByRole('button')
);
userEvent.click(await screen.findByText('Orange'));
expect(screen.getByDisplayValue('Orange')).toBeInTheDocument();

Hope this helps.