如何为 React Big Calendar 编写快照测试

Question

我为我的项目导入 react-big-calendar .
我需要为这个组件编写一个测试。
现在，我只想测试事件是否已成功创建。
所以我的代码是Calenadr.jsx：

import { useState } from "react";
import React from "react";
import { Calendar, momentLocalizer} from 'react-big-calendar'
import 'react-big-calendar/lib/css/react-big-calendar.css';
import moment from 'moment'

export default function Calender() {
    const localizer = momentLocalizer(moment)
    const [events, setEvenets]=useState([]);
    
    const onSelectEvent=(pEvent)=> {
        const r = window.confirm("Would you like to remove this event?")
        if(r === true){
            const events_=[...events];
            const idx = events_.indexOf(pEvent);
            events_.splice(idx, 1);
            setEvenets(()=>[...events_] );
            }
    } 
    let formats = { 
        dayFormat: (date, culture, localizer) =>
        localizer.format(date, 'dd', culture),
        timeGutterFormat: (date, culture, localizer) => 
        localizer.format(date, 'hA', culture),
        eventTimeRangeFormat: ({ start, end }, culture, localizer) => {
          let s = localizer.format(start, ' ', culture);
          let e = localizer.format(end, ' ', culture);
          return `${s}  ${e}`;
        },    
    }
    //selecting events 
    const handleSelect = ({ start, end }) => { 
        setEvenets(
            events=> [...events, {
                start: start,
                end: end,            
            }]   
        )    
    }
    return (
        <><Calendar
            selectable
            defaultDate={new Date(2006, 1, 1)}
            isGutter={true}
            localizer={localizer}
            events={events}
            toolbar={false}
            formats={formats}
            defaultView='week'
            timeslots={4}
            step={15}
            min={new Date(0, 0, 0, 7, 0, 0)}
            max={new Date(0, 0, 0, 22, 0, 0)}
            style={{ height: 800 }}
            onSelectEvent={event => onSelectEvent(event)}
            onSelectSlot={handleSelect} />
            </>

    )}

我不需要在蓝色矩形中显示标题和时间，所以我只能得到一个空矩形。

输出 请点击查看输出内容。

看起来 class="rbc-time-slot" 中什么都没有
所以我不知道如何测试事件是否创建。
我搜索类似 fireEvent.click(x.coordinate, y.coodinate) 的方法，但与此方法无关。
我问了TA，他给出的建议是 dateInput.simulate('change', {target: { value: "2018-01-04" }});
关键是我在快照中找不到像 2018-01-04 这样的东西。它只给我 class="rbc-time-slot"。
现在，我有这个：

it('test creat function', () => {
const date = new Date(2006, 1,1)
const y = date.getFullYear()
const m = date.getMonth()
const d = date.getDay()
let dd = date.getDate()
let start = new Date(y, m, dd, "7" ,"00", 0)
let end = new Date(y, m, dd, "20", "30",0)
const events= {start:start, end:end}
const tree = render(<selectable prop="testing" events={events}/>);
fireEvent.click(x, y)
function click(x, y)
{
var ev = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true,
    'screenX': x,
    'screenY': y
 });

 var el = document.elementFromPoint(x, y);

 el.dispatchEvent(ev);
}
click(70, 400);

expect(tree).toMatchSnapshot();
//should check something is not empty, not to check tree.toMatchSnapshot
});

有什么想法吗？
我在网上搜索，但似乎没有与测试相关的主题。
任何帮助将不胜感激。