Question

此问题不是用于测试状态更改，而是用于将初始值设置为true。这样该菜单将被打开，我可以在打开的菜单上对onClick进行功能测试。我正在使用Jest和酶。

组件：



const CustomHeader = () => {


  const [anchorEl, setAnchorEl] = useState(null)



  const open = Boolean(anchorEl)

  const handleMenu = event => {
    setAnchorEl(event.currentTarget)
  }

  const handleClose = () => {
    setAnchorEl(null)
  }

  const onProfileClicked = () => {
    dispatch(setProfileShown(true))
    dispatch(setEditMode(false))
    handleClose()
  }

  return (
    <Header position='fixed'>
      <HeaderContent>

        <>
          <ProfileButton
            aria-label='account of current user'
            aria-haspopup='true'
            onClick={handleMenu}
            color='primary'
          >
            <ProfileIcon color='primary' />
            <HeaderTitle variant='subtitle1'>
              &nbsp;{user.firstName}
            </HeaderTitle>
          </ProfileButton>
          <Menu
            id='menu-appbar'
            anchorEl={anchorEl}
            open={open}
            onClose={handleClose}
          >
            <MenuItem onClick={() => onProfileClicked()}>Profile</MenuItem>
            <MenuItem onClick={() => dispatch(signOut())}>Logout</MenuItem>
          </Menu>
        </>
      </HeaderContent>
    </Header>
  )
}

如您所见，如果anchorEl为true，则会打开菜单，并且可以通过单击 Profile onProfileClicked()来测试是否调用Menubutton。我的问题是，在测试中如何将anchorEl设置为true？由于wrapper.setState()仅可用于类组件，而不能用于带有钩子的功能。

Answer 1

只需触发适当的互动即可

wrapper.find({ 'aria-label': 'account of current user' }).simulate({ target: document });

如果您使用的是shallow()，那么您也可以通过{target: null}，但是对于mount()，取决于<Menu>的实现是document是否可行，或者您需要传递一些嵌套的DOM元素。

初始化状态，同时使用jest和酶使用useState测试组件

1 个答案: