如何使用React测试库模拟删除测试中的项目？

Question

我要在单击删除按钮时删除项目。如何使用react-testing库模拟删除项

我有如下删除按钮，

function SomeComponent () {
    const { deleteItem } = useDeleteItem();
    render = () => {
        return (
            <Menu
                id={Item.id}
                onClick={() => deleteItem({ id: Item.id })}
                data-test-id={`test-${Item.id}`}
             >
                 Delete
             </Menu>

         )
     }

在测试中，我做下面的事情，

const items: Items[] = [
    {
        id: '1',
        name: 'somename',
    }
    {
        id: '2';
        name: 'other',
     }
];  


const deleteItem: {
    id: '1',
    name:'somename',
}


test('remove an item', async () => {
    const { getByTestId } = utils.render(
        <SomeComponent openByDefault />,
        [
            utils.gqlMock(LIST_ITEMS, items),
            utils.gqlMock(DELETE_ITEM, deleteItem,
            {id: Item.id}), //this should be called after clicking test- 
            delete-1 element but it doesnt as i get timedout error for 
            //domchange
            utils.gqlMock(LIST_ITEMS, [..items, deleteItem]),
        ]
    );
    utils.fireEvent.click(getByTestId("test-delete-1"));
    await utils.waitForDomChange(); //it throws error here timedout 
    expect(getByTestId("test-delete-1").toBeNull();
) 

单击删除按钮后，我希望删除该项目。所以我检查delete元素是否为空。

但是此测试失败了，因为此删除元素仍然可见。

有人可以告诉我如何在此处模拟删除项目。谢谢。