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

Question

我是这个 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);
    });

Answer 1

您正在寻找的是酶：

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

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

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