测试React组件上的mousedown操作无法正常工作

Question

我的Dropdown组件代码为Dropdown.js

import React, { useState, useRef, useEffect } from "react";
import PropTypes from "prop-types";
import styles from "./Dropdown.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretDown } from "@fortawesome/free-solid-svg-icons";

export default function Dropdown({ listOptions, setState, headerText }) {
  const [isOpen, setIsOpen] = useState(false);

  const wrapperRef = useRef(null);

  function handleClickOutside(event) {
    if (wrapperRef && !wrapperRef.current.contains(event.target) && isOpen) {
      setIsOpen(false);
    }
  }

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  });

  return (
    <div data-test="whole-component" className={styles.dropdown}>
      <FontAwesomeIcon
        onClick={() => {
          setIsOpen(!isOpen);
        }}
        size="2x"
        icon={faCaretDown}
        aria-hidden="true"
      />
      <div
        ref={wrapperRef}
        className={styles.dropdowncontent}
        style={isOpen ? { visibility: "visible" } : { visibility: "hidden" }}
        id={isOpen ? "open" : "closed"}
      >
        <h4>{headerText}</h4>
        <div className={styles.dropdownbody}>
          {listOptions.map(option => {
            return (
              <span
                key={option}
                className={styles.dropdowntext}
                onClick={() => {
                  setState(option);
                  setIsOpen(!isOpen);
                }}
              >
                {option}
              </span>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Dropdown.propTypes = {
  listOptions: PropTypes.array.isRequired,
  setState: PropTypes.func.isRequired,
  headerText: PropTypes.string
};

并且测试文件为Dropdown.test.js

import React from "react";
import { mount } from "enzyme";
import { findByTestAtrr } from "../../tools/utils";
import Dropdown from "../components/common/Dropdown";

const setUp = (props = {}) => {
  const component = mount(<Dropdown {...props} />);
  return component;
};

describe("Dropdown Component", () => {
  let wrapper;

  beforeEach(() => {
    jest.resetAllMocks();
  });

  it("Should render without errors", () => {
    const props = {
      listOptions: [],
      setState: jest.fn(),
      headerText: "Header text"
    };
    wrapper = setUp(props);

    const component = findByTestAtrr(wrapper, "whole-component");
    expect(component.length).toBe(1);
  });

  it("Should change isOpen state on click outside component", () => {
    const map = {};

    const props = {
      listOptions: [],
      setState: jest.fn(),
      headerText: "Header text"
    };

    document.addEventListener = jest.fn((event, callback) => {
      map[event] = callback;
    });
    const wrapper = setUp(props);
    expect(wrapper.find("#closed").length).toBe(1);

    map.mousedown({ target: document.createElement("a") });

    expect(wrapper.find("#open").length).toBe(1);

    expect(document.addEventListener).toBeCalledTimes(1);
  });
});

当我尝试查找ID为#open的元素时，第二项测试失败。我正在更改状态更改中的元素的ID，并且在测试中未这样做。手动测试时效果很好。我不知道考试有什么问题。

Answer 1

尝试布尔值或char可能会起作用