Dropdown selection using FireEvent in react-testing-library

Question

I am working on the RTL and trying to test the dropdown selection. We have our component library which has custom controls. In this i fire select events on the custom dropdown.

Here is the screen debug snippets

1. Here is the screen debug output

 <div
                          aria-expanded="false"
                          aria-haspopup="true"
                          aria-owns="contact-person_list"
                          role="combobox"
                        >
                          <button
                            aria-hidden="true"
                            class="hidden-control nofocus"
                            tabindex="-1"
                            type="button"
                          />
                          <span
                            class="input-field input-field--active input-field--focus"
                          >
                            <span
                              class="input-field__field"
                            >
                              <input
                                aria-autocomplete="none"
                                aria-controls="contact-person_list"
                                aria-describedby=""
                                aria-labelledby="contact-person_label"
                                aria-readonly="true"
                                autocomplete="off"
                                class="input-field__input ellipsis"
                                id="contact-person"
                                readonly=""
                                type="text"
                                value="Passanger 1"
                              />
                            </span>
                            <label
                              aria-label="Contact Person"
                              class="input-field__placeholder"
                              for="contact-person"
                              id="contact-person_label"
                            >
                              Contact Customer
                            </label>
                            <span
                              class="input-field__chevron"
                            >
                              <span
                                aria-hidden="true"
                                class="pictogram-wrapper"
                                dir="auto"
                              >
                                <i
                                  class="icon icon-chevron-down"
                                />
                              </span>
                            </span>
                          </span>
                          
                          <p
                            aria-live="polite"
                            class="auto-suggest__error-msg"
                            role="region"
                          />
                        </div>

2. Get the input element by getByRole & fire click to open the dropdown.

const { getByRole, container, asFragment } = renderContactCardMock(passengerPersonEmptyMock);
    await userEvent.click(getByRole('textbox', { name: 'Contact Customer' }));
    expect(await screen.getByText('Travel Agent')).toBeInTheDocument(); // this statement comfirm dropdown open

When the user click textbox then dropdown open & I can see the changes in output of screen debug, dropdown HTML is coming

 <div
            class="popover pop-over hideDeskViewGroupListTitle enhanced-auto-suggest-v2-pop-over"
            data-auto="AutoSuggestFieldPopover"
            initialpositiondelay="0"
            style="width: 0px; top: 9px; left: 10px;"
            tabindex="-1"
          >
            <div
              class="popover__arrow"
            />
            <div
              class="scroll scroll--visible"
            >
              <div
                class="scroll__box scroll__box--use-scroll"
              >
                <div>
                  <div
                    class="rich-text auto-suggest__group-list-title"
                  >
                    Contact Customer
                  </div>
                  <div
                    class="auto-suggest modal-popover enhanced-auto-suggest-v2-popup"
                    id="contact-person"
                    role="listbox"
                    tabindex="-1"
                  >
                    <div
                      class="auto-suggest__list"
                    >
                      <button
                        aria-selected="false"
                        class="auto-suggest__item auto-suggest__highlight-selected-item"
                        data-prevent-esc="true"
                        role="option"
                        type="button"
                      >
                        <div
                          class="drop-down-item__dropdown"
                        >
                          <strong
                            class="drop-down-item__dropdown-name"
                          >
                            Passenger 1
                          </strong>
                          <span
                            aria-hidden="true"
                            class="pictogram-wrapper"
                            dir="auto"
                          >
                            <i
                              class="icon icon-check"
                            />
                          </span>
                        </div>
                      </button>
                      <button
                        aria-selected="false"
                        class="auto-suggest__item"
                        data-prevent-esc="true"
                        role="option"
                        type="button"
                      >
                        <div
                          class="drop-down-item__dropdown"
                        >
                          <strong
                            class="drop-down-item__dropdown-name"
                          >
                            Travel Agent
                          </strong>
                        </div>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="scroll__bar scroll__bar--visible"
              />
            </div>
          </div>

Above, you can to see the option (Passenger 1, Travel Agent)in dropdown and when fire the click on option value is not getting select.

 await userEvent.click(screen.getByRole('option', {name : 'Travel Agent'}));
 expect(screen.getByText("Travel agent should add regsiterd contact number")).toBeInTheDocument(); // this statement is failing.

the above statement is working fine and the dropdown is closing as well. Still, the selection is not reflected in the textbox. Based on the change in selection value "Travel agent should add registered contact number" message will be visible which I am trying to test.

I was trying to test some changes on the HTML based on the selection. I am not sure what I am doing wrong here.

Answer 1

Instead of getBy use findBy as findBy supports async/await whereas getBy and queryBy doesn't.

const { getByRole, container, asFragment } = renderContactCardMock(passengerPersonEmptyMock);
await userEvent.click(getByRole('textbox', { name: 'Contact Customer' }));

// updated code
const element = await screen.findByText('Travel Agent');
expect(element).toBeInTheDocument();

Alternative solution using waitFor (if findBy doesn't work)

waitFor(async () => {
   const element = await screen.findByText('Travel Agent');
   expect(element).toBeInTheDocument();
});

https://testing-library.com/docs/queries/about/

Type of Query	0 Matches	1 Match	>1 Matches	Retry (Async/Await)
Single Element
getBy...	Throw error	Return element	Throw error	No
queryBy...	Return null	Return element	Throw error	No
findBy...	Throw error	Return element	Throw error	Yes