如何使用 jest 和酶测试 onClick() 函数和 useState 钩子

Posted 2023-03-13

【中文标题】如何使用 jest 和酶测试 onClick() 函数和 useState 钩子

【英文标题】：How to test onClick() funct and useState hooks using jest and enzyme

【发布时间】：2021-07-27 11:16:09

【问题描述】：

我是这个 jest+enzyme 测试的新手，我被困在如何覆盖诸如 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>
         />

这是我编写的测试，但它没有涵盖 onClick()、useEffect() 和 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);
    );

【参考方案1】：

您正在寻找的是酶：

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

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

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

【讨论】：

好的就试试这个，以及如何测试这个useEffect()函数？

在功能组件中测试效果，而不是功能本身。因此，测试您的isMenuOpen 是否正确切换（通过呈现的内容）或搜索酶的addEventListener 测试。

明白你的意思，调查一下，我需要你的另一个建议，你可以看到有这个toggle=() => toggleMenu((state) => !state) 道具在 组件中传递，所以对于 onclick，btn.simulate正在工作，但是对于这个切换道具，它不起作用，你知道有什么解决办法吗？

idk 这个Popover 实际上是什么。通过控制台日志查看wrapper.debug() 并查看如何访问实际的 html 元素