CODEWITHSUNDEEP
reactjstypescriptjestjsreact-hooksenzyme
Gregory Javis
Gregory Javis

Reputation: 135

How to test onClick() funct and useState hooks using jest and enzyme

I am new to this jest+enzyme testing and I am stuck at how to cover the lines and functions such as onClick(), the useState variables and also useffect(). Can anyone with any experience in such scenerios please give me some direction on how to do that efficiently.

Below is the code:

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>
         />
}

Here is the test I have written but it isn't covering the onClick(), useEffect() and handleUserKeyPress() function.

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

Upvotes: 0

Views: 937

Answers (1)

k-wasilewski
k-wasilewski

Reputation: 4643

What you're looking for is enzyme's:

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

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

Not sure if it'd trigger the window listener, it's possible you'll have to mock it.

Upvotes: 1

Related Questions