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

[joshuarize]

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.

[jquense]

We test it in Jest, maybe reference our tests to see how you might alter yours? https://github.com/react-bootstrap/react-bootstrap/blob/master/test/NavDropdownSpec.js

[joshuarize]

@jquense thank you for the quick reply. i had previously looked to see if you were testing user actions but that doesn't seem to be the case. instead, everything is using the defaultShow prop in order to render the entire list elements. for my test case, the dropdown items shouldn't be visible when the user first loads the page, they should only be visible after a user clicks the dropdown. in the examples for the dropdown components, the same is true, e.g. all items are not visible until a user clicks the dropdown button.

[jquense]

have you tried adding a delay after the click? The positioning logic is async i believe

[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.

[visoft]

Thanks @joshuarize for the tip, here's my test:

<NavDropdown
    aria-label="Account Dropdown">
...
</NavDropdown>

test("renders login link", () => {
  const loginMenu = screen.getByLabelText("Account Dropdown");
  const aElement = loginMenu.querySelector("a");
  expect(aElement).toBeInTheDocument();
  aElement?.click();
  const loginLink = within(loginMenu).getByText("Login");
  expect(loginLink).toBeInTheDocument();
});

[t-ubukata]

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

[LiviuSosu]

@t-ubukata I confirm that the solution you pointed ou worked for me as well. Thank you :-)