Блог

Я новичок в этом тестировании ферментов 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 amp;amp;
      !(
        (e.target.id amp;amp; e.target.id.includes("tmp")) ||
        (e.target.className amp;amp;
          (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);
    });
 

То, что вы ищете, — это фермент:

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

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

Не уверен, что это вызовет прослушиватель окон, возможно, вам придется поиздеваться над ним.