我正在尝试为一个简单的天气Web应用编写一些jest测试，这个应用是我用React开发的。当我运行测试时，它创建了一个组件的快照，看起来不错，但是当我尝试触发一个click事件时，我得到了一个类型错误：

TypeError: tree.props.handleClick is not a function

我使用jest docs来编写这个测试，我认为这就是你触发点击事件的方式。我没有正确引用点击函数吗？我是第一次编写测试，所以欢迎提供任何关于编写React with jest测试的信息！

React代码

import React from "react"
import { useEffect, useState } from 'react'
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const CityEntry = ({ weatherDatum, deleteLocation }) => {
  const capitalizeFirstLetter = (string) => {
    return string.charAt(0).toUpperCase() + string.slice(1);
  }

  const handleClick= () => {
    deleteLocation(weatherDatum.id)
  }

  return (
    <div className="city">
      <p className="location flex-item">{capitalizeFirstLetter(weatherDatum.location)} </p>
      <p className="temp flex-item">{weatherDatum.temperature}  &#x2109;</p>
      <p className="feels-like flex-item">Feels like: {weatherDatum.feelsLike}</p>
      <p className="description flex-item">{capitalizeFirstLetter(weatherDatum.description)}</p>
      <p><img className="icon flex-item" src={`https://openweathermap.org/img/w/${weatherDatum.icon}.png`}></img></p>
      <button className="delete" onClick={handleClick}>Delete</button>
    </div>
  )
}

export default CityEntry;

Jest测试代码

import renderer from 'react-test-renderer';
import CityEntry from '../src/Components/CityEntry.js'

it('deletes a city entry when clicked', () => {
  const component = renderer.create(
    <CityEntry weatherDatum={{ id: '', lat: '', lon: '', location: '', temperature: '', feelsLike: '', description: '', icon: '' }} />
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot()

  renderer.act(() => {
    tree.props.handleClick()
  });

  tree = component.toJSON();
  expect(tree).toMatchSnapshot()
})

创建的Jest快照

exports[`deletes a city entry when clicked 1`] = `
<div
  className="city"
>
  <p
    className="location flex-item"
  >
     
  </p>
  <p
    className="temp flex-item"
  >
      ℉
  </p>
  <p
    className="feels-like flex-item"
  >
    Feels like: 
  </p>
  <p
    className="description flex-item"
  />
  <p>
    <img
      className="icon flex-item"
      src="https://openweathermap.org/img/w/.png"
    />
  </p>
  <button
    className="delete"
    onClick={[Function]}
  >
    Delete
  </button>
</div>
`;