如何测试是否单击了react组件
如何测试是否单击了react组件
提问于 2022-01-13 21:03:25
我有一个名为HelpButton的react组件，它如下所示：
import helpLogo from '../Resources/helplogo.svg';
function HelpButton(props) {
const [isOpen, setisOpen] = React.useState(false)
function toggle() {
setisOpen(prevIsOpen => !isOpen)
if (isOpen)
console.log("Help Open")
else
console.log("Help Closed")
}
return (
<div className="helpIconBgrnd" onClick={toggle} data-testid="helpIconBgrnd">
<img className="help-icon" src={helpLogo} alt='help-icon' />
</div>
)
}
export default HelpButton我想测试这个组件是否被点击了，而且我知道有一种使用expect(mockCallbackFunction).toHaveBeenCalledTimes(number)的方法。但问题是，我没有将切换函数作为支柱传递给HelpButton，而是在HelpButton组件中声明它，因此我认为不能使用这种方法。如何测试是否单击了HelpButton组件？
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-01-14 01:53:12
那么，您想签入“某些组件”，HelpButton组件是否已打开？
试试这个：
import { useState } from 'react';
const Parent = () => {
const [isOpen, setisOpen] = useState(false);
//now you know if the component is open, you can do whatever you need with it
const handleToggle = () => setisOpen(prevState => !prevState);
return (
<HelpButton onToggle={handleToggle}/>
)
}
export default Parent;
const HelpButton ({ onToggle }) {
return (
<div className="helpIconBgrnd" onClick={onToggle} data-testid="helpIconBgrnd">
<img className="help-icon" src={helpLogo} alt='help-icon' />
</div>
);
}
export default HelpButton;Stack Overflow用户
发布于 2022-01-13 21:16:22
试试这个。在更改isOpen属性时，它将重新呈现。
useEffect(()=>{
toggle();
},[isOpen]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70706199
复制相关文章
相似问题
腾讯云开发者
