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?

CodePudding user response：

Try This. It's re-render while isOpen property is changed.

useEffect(()=>{
toggle();
},[isOpen]);

CodePudding user response：

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;