3

I have a bootstrap navigation menu and I am trying to simulate a click of a nav item on a nav dropdown in React with Jest. I have the following dropdown:

Navbar.js

 export default props => {
  const { user, email, group } = props;
  return (
    <Nav className="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
      <button
        type="button"
        id="sidebarToggleTop"
        className="btn btn-link d-md-none rounded-circle mr-3"
      >
        <FontAwesomeIcon icon={faBars} />
      </button>

      <ul className="navbar-nav ml-auto">
        <div className="topbar-divider d-none d-sm-block" />

        <NavDropdown
          data-testid="profile-dropdown"
          className="no-arrow"
          title={
            <>
              <span className="mr-2 d-none d-lg-inline text-gray-600 small">
                {user}
              </span>
              {email && (
                <Gravatar
                  email={email}
                  className="img-profile rounded-circle"
                />
              )}
            </>
          }
          id="userDropdown"
        >
          <div className="dropdown-item">Profile: {group}</div>
          <Link className="dropdown-item" to="/refresh">
            Refresh
          </Link>
          <NavDropdown.Divider />
          <NavDropdown.Item data-testid="sign-out-button" eventKey="logout" onSelect={() => Auth.signOut()}>
            SignOut
          </NavDropdown.Item>
        </NavDropdown>
      </ul>
    </Nav>
  );
};

Can anyone help? The item is not present in the DOM on render so I cannot use data-testid.

Carl
  • 841
  • 1
  • 13
  • 33
  • Is this your whole navbar or is there something above? I guess there is a parent component here. – Trisma Apr 20 '20 at 14:57
  • @Trisma updated to include the full component. – Carl Apr 20 '20 at 15:12
  • Are you sure `NavDropdown` passes `data-testid` to its childs? try wrapping `NavDropdown` is a `div` and give it a `data-testid` and check if that that `testid` is rendered, if so you have to find a way to pass `testid` to the childs of `NavDropdown` or just wrap it in a div – Fibi Apr 20 '20 at 15:15
  • Does this answer your question? [Simulate a button click in Jest](https://stackoverflow.com/questions/43747397/simulate-a-button-click-in-jest) – ilkerkaran Apr 20 '20 at 15:15
  • @Carl oh I just saw that this is Jest. I thought you were using Cypress... I guess this is relevant : https://stackoverflow.com/questions/49934975/how-to-simulate-mouse-over-event-on-a-div-using-enzyme-for-testing-a-react-appli You could hover and then simulate the click? – Trisma Apr 20 '20 at 15:15
  • @Fibi not sure I understand what you mean, wouldn't the testid's have to be unique then? – Carl Apr 20 '20 at 16:10
  • @ilkerkaran no, I can click on the dropdown, but I can't work out how to then click the navigation item as it's not originally shown in the dom. – Carl Apr 20 '20 at 16:12

0 Answers0