如何测试反应组件是否被点击

Question

我有一个名为 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)。但问题是我没有将切换功能作为 prop 传递给 HelpButton，而是在 HelpButton 组件内部声明，所以我认为我不能使用这种方法。如何测试 HelpButton 组件是否被单击？

Answer 1

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

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

Answer 2

所以您想检查'Some Component' 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;

如何测试反应组件是否被点击

How to test if a react component was clicked

javascript

unit-testing

reactjs

jestjs

react-testing-library