Unable to test NavDropdown with Jest because it doesn't render menu items in the DOM

Describe the bug

If you have a NavDropdown menu, the DOM doesn’t render the menu items on first load (NavDropdown.Item) so they aren’t available to test. Here is what my menu looks likes:

// Navbar.jsx
<div className="d-flex flex-row">
  <NavDropdown
    title="Dropdown"
    id="nav-dropdown"
    data-testid="profile-navigation"
    onSelect={handleDropdownSelect}
  >
    <div className="d-flex">
      <div className="d-flex flex-column">
        <small className="text-primary font-weight-bold">Member</small>
        <small>Tim Robbins</small>
        <small className="text-muted">@timrobbins</small>
      </div>
    </div>
    <NavDropdown.Item eventKey="home">Home</NavDropdown.Item>
    <NavDropdown.Item eventKey="users">Users</NavDropdown.Item>
  </NavDropdown>
</div>

To Reproduce

Here is what my test looks like:

it('should open dropdown navigation when user clicks on profile image', async () => {
    const { getByTestId, findByText } = render(<Navbar />);
    const profileDropdown = getByTestId('profile-navigation');
    userEvent.click(profileDropdown);
    const menuItem = findByText('Member');
    expect(menuItem).toBeInTheDocument();
  });

Expected behavior

The test should pass if the user clicks on the proper DOM element to render the components in the DOM. If there is no way to make the DOM render with a user click, then there should be a way to pre-render the component with a prop.

Environment (please complete the following information)

MacOS 2018 React-Bootstrap v1.0.0 Jest

Additional context

Is there any way to pre-render the component in the DOM on first page load. I can see this also causing accessibility issues if that doesn’t happen.

I don’t mean using the show prop either. I think it should exist in the DOM but be hidden on first page load.

[joshuarize]

@jquense i did try that. but i think i found the issue. in order to test properly, you need to target the child a of the dropdown component. the event doesn’t seem to bubble at the parent. so my fix is to query and the a element, then perform a click in the test on that element, which will update the DOM. it sorta makes sense, but just makes testing a pain in the butt.

[t-ubukata]

I found the answer. https://stackoverflow.com/questions/74159939/how-to-test-react-bootstrap-navdropdown-with-react-testing-library