测试：模拟对html元素的点击并使用笑话和酵素调用函数

Question

我正在尝试检查该函数是否被调用过一次。我正在使用toHaveBeenCalledTimes方法来检查此测试，但该测试始终会失败。

我对玩笑和酶的测试：

test("Check if order tracks functions it's called", () => {
  const handleSortByRating = jest.fn();
  const trackList = shallow(<TrackList />);

  trackList.find(".sort-button").simulate("click");
  expect(handleSortByRating).toHaveBeenCalledTimes(1);
});

开玩笑的输出：

expect(jest.fn()).toHaveBeenCalledTimes(expected)

  Expected number of calls: 1
  Received number of calls: 0

 expect(handleSortByRating).toHaveBeenCalledTimes(1);
                            ^

TrackList组件。如您所见，我正在尝试测试该组件内部函数的调用。

const TrackList = ({ handleOnGetLyric, tracks }) => {

  useEffect(() => {
    const list = tracks.filter((track) =>
      track.track.primary_genres.music_genre_list.some(
        (genre) => genre.music_genre?.music_genre_id === genreFilter
      )
    );

    setFilteredList(list);
  }, [genreFilter]);

  const handleSortByRating = (boolean) => {
    let list = [];
    if (boolean) {
      list = tracksToList.sort((a, b) =>
        a.track.track_rating > b.track.track_rating ? 1 : -1
      );
    } else {
      list = tracksToList.sort((a, b) =>
        a.track.track_rating < b.track.track_rating ? 1 : -1
      );
    }
    setFilteredList(list);
    setSortByRating(boolean);
  };

  return (
    <>
      <div className="genres-wrapper">
        <h2 className="section-title">Lyrics list</h2>

        <div className="genres">
          {genres.map((genre, index) => (
            <Pill
              key={`genre-${index}`}
              genre={genre}
              handleOnClick={setGenreFilter}
            />
          ))}
          <span className={pillClear} onClick={() => setGenreFilter(0)}>
            Clear <FaTimes className="icon-times" />
          </span>
        </div>

        <div className="filters">
          <button
            className="sort-button"
            onClick={() => handleSortByRating(!sortByRating)}
          >
            Rating <FaCaretDown className={iconSort} />
          </button>
        </div>
      </div>

      <div className="tracks-grid">{trackList}</div>
    </>
  );
};

我可以通过该功能的争论吗？如果是的话，怎么办？