Как имитировать удаление элемента в тесте с помощью библиотеки тестирования реакции?

Question

Я хочу удалить элемент, нажав кнопку удаления. Как я могу имитировать элемент удаления с помощью библиотеки тестирования реакции

У меня есть кнопка удаления, как показано ниже,

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();
) 

После нажатия кнопки удаления я хочу, чтобы элемент был удален. поэтому я проверяю, что элемент удаления имеет значение null.

Но этот тест не проходит ... поскольку этот элемент удаления все еще виден.

Может ли кто-нибудь сказать мне, как имитировать удаление элемента здесь. Спасибо.