我有一個名為 HelpButton 的反應組件，它看起來像這樣：
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 組件？
uj5u.com熱心網友回復：
試試這個。它在 isOpen 屬性更改時重新渲染。
useEffect(()=>{
toggle();
},[isOpen]);
uj5u.com熱心網友回復：
因此，您想檢查“某些組件”是否打開了 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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/412500.html
標籤：