Reactjs 如何使用jest和Ezyme测试onClick（）funct和useState钩子

我不熟悉这个jest+酶测试，我一直在研究如何涵盖onClick（）、useState变量和useffect（）等行和函数。有这方面经验的人能给我一些指导吗

代码如下：

export interface TMProps {
  onClick: (bool) => void;
  className?: string;
  style?: object;
}
export const TM: React.FC<TMProps> = (props) => {
  const {onClick} = props;
  const [isMenuOpen, toggleMenu] = useState(false);
const handleUserKeyPress = (event) => {
    const e = event;
    if (
      menuRef &&
      !(
        (e.target.id && e.target.id.includes("tmp")) ||
        (e.target.className &&
          (e.target.className.includes("tmp-op") ||
            e.target.className.includes("tmp-option-wrapper")))
      )
    ) {
      toggleMenu(false);
    }
  };

  useEffect(() => {
    window.addEventListener("mousedown", handleUserKeyPress);
    return () => {
      window.removeEventListener("mousedown", handleUserKeyPress);
    };
  });

  return (
    <React.Fragment className="tmp">
      <Button
        className={props.className}
        style={props.style}
        id={"lifestyle"}
        onClick={() => toggleMenu((state) => !state)}>
        Homes International
        <FontAwesomeIcon iconClassName="fa-caret-down" />{" "}
      </Button>
      <Popover
        style={{zIndex: 1200}}
        id={`template-popover`}
        isOpen={isMenuOpen}
        target={"template"}
        toggle={() => toggleMenu((state) => !state)}
        placement="bottom-start"
        className={"homes-international"}>
        <PopoverButton
          className={
            "template-option-wrapper homes-international"
          }
          textProps={{className: "template-option"}}
          onClick={() => {
            onClick(true);
            toggleMenu(false);
          }}>
          Generic Template{" "}
        </PopoverButton>
         />
}

导出接口TMProps{
onClick：（bool）=>void；
类名？：字符串；
风格？：对象；
}
导出常量TM:React.FC=（道具）=>{
const{onClick}=props；
常量[isMenuOpen，toggleMenu]=useState（false）；
const handleUserKeyPress=（事件）=>{
常数e=事件；
如果(
梅努雷夫&&
!(
（e.target.id&&e.target.id.includes（“tmp”））||
（e.target.className）&&
（e.target.className.includes（“tmp op”）||
e、 target.className.includes（“tmp选项包装器”））
)
) {
切换菜单（假）；
}
};
useffect（（）=>{
window.addEventListener（“鼠标向下”，手动按键）；
return（）=>{
window.removeEventListener（“鼠标向下”，手动按键）；
};
});
返回(
切换菜单（（状态）=>！状态）}>
国际家园酒店
{" "}
切换菜单（（状态）=>！状态）}
placement=“底部开始”
className={“家庭国际”}>
{
onClick（真）；
切换菜单（假）；
}}>
通用模板{“”}
/>
}

下面是我编写的测试，但它不包括onClick（）、useffect（）和handleUserKeyPress（）函数

describe("Modal Heading", () => {
    React.useState = jest.fn().mockReturnValueOnce(true)
    it("Modal Heading Header", () => {
        const props = {
            onClick: jest.fn().mockReturnValueOnce(true),
            className: "",
            style:{}
        };
        const wrapper = shallow(<TM {...props} />);
        expect(wrapper.find(Button)).toHaveLength(1);
    });
    it("Modal Heading Header", () => {
        const props = {
            onClick: jest.fn().mockReturnValueOnce(true),
            className: "",
            style:{}
        };
        const wrapper = shallow(<TM {...props} />);
        expect(wrapper.find(Popover)).toHaveLength(1);
    });
    it("Modal Heading Header", () => {
        const props = {
            onClick: jest.fn().mockReturnValueOnce(true),
            className: "",
            style:{}
        };
        const wrapper = shallow(<TM {...props} />);
        expect(wrapper.find(PopoverButton)).toHaveLength(1);
    });

description（“模式标题”），（）=>{
React.useState=jest.fn（）.mockReturnValueOnce（true）
它（“模式标题标题”，（）=>{
常量道具={
onClick:jest.fn（）.mockReturnValueOnce（true），
类名：“”，
样式：{}
};
常量包装器=浅（）；
expect（wrapper.find（Button））.toHaveLength（1）；
});
它（“模式标题标题”，（）=>{
常量道具={
onClick:jest.fn（）.mockReturnValueOnce（true），
类名：“”，
样式：{}
};
常量包装器=浅（）；
expect（wrapper.find（Popover））.toHaveLength（1）；
});
它（“模式标题标题”，（）=>{
常量道具={
onClick:jest.fn（）.mockReturnValueOnce（true），
类名：“”，
样式：{}
};
常量包装器=浅（）；
expect（wrapper.find（popopoverbutton））.toHaveLength（1）；
});

您正在寻找的是酵素：

const btn = wrapper.find('lifestyle');

btn.simulate('click');
wrapper.update();

---

不确定它是否会触发窗口侦听器，您可能必须对其进行模拟。

好的，我们将尝试此操作，以及如何测试此useEffect（）函数？在功能组件中，您测试的是效果，而不是函数本身。因此，请测试您的

isMenuOpen

是否正确切换（通过渲染内容）或者搜索Ezyme的

addEventListener

测试。明白你的意思了，研究一下，我还需要你给我一个建议，你可以看到这里有一个

toggle={（）=>toggleMenu（（state）=>！state）}

prop正在组件中传递，因此对于onclick，btn.simulate正在工作，但是对于这个toggle prop，它不工作，您知道对此的任何修复方法吗？idk这个

Popover

实际上是什么。通过控制台日志

wrapper.debug（）

了解如何访问实际的html元素