React Jest在单元测试中单击导航项

时间:2020-04-20 09:21:49

标签: reactjs jestjs

我有一个引导导航菜单,我正在尝试模拟React with Jest中导航下拉列表上的导航项单击。我有以下下拉菜单:

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>
  );
};

有人可以帮忙吗?该项目在渲染时不存在于DOM中,因此我无法使用data-testid。

0 个答案:

没有答案
相关问题