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();

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

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

1 个答案: