I have a react component called HelpButton, which looks like this:
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
I want to test if this component was clicked and I know there is an approach where you use expect(mockCallbackFunction).toHaveBeenCalledTimes(number). But the problem is that I do not pass the toggle function as a prop to HelpButton, instead it is declared inside the HelpButton component, so I don't think I can use this approach.
How can I test if the HelpButton component was clicked?
Try This. It's re-render while isOpen property is changed.
useEffect(()=>{
toggle();
},[isOpen]);
So you want to check in 'Some Component' whether HelpButton Component is open or not?
Try this:
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;