How to test dropdown component with React Testing Library

UI Components for React
Post Reply
emilio0281
Posts: 5
Joined: 01 Apr 2012, 20:59
Location: Dominican Republic

28 Jun 2021, 16:05

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.
Manuel Emilio Araujo

mcandu
Posts: 57
Joined: 20 Jan 2021, 16:31

06 Jul 2021, 13:36

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

traitano
Posts: 1
Joined: 21 Jul 2021, 22:51

21 Jul 2021, 23:25

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.

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 12 guests