Graphql 如何使用react测试库模拟删除测试中的项？

我想在单击“删除”按钮时删除一个项目。如何使用react测试库模拟删除项

我有下面的删除按钮

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

函数组件（）{
const{deleteItem}=useDeleteItem（）；
渲染=（）=>{
返回(
deleteItem（{id:Item.id}）
数据测试id={`test-${Item.id}`}
>
删除
)
}

在我的测试中，我做了如下的事情

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

const items:items[]=[
{
id:'1'，
姓名：'somename'，
}
{
id:'2'；
名称：'其他'，
}
];  
常量删除项：{
id:'1'，
姓名：'somename'，
}
测试（'removeanitem'，async（）=>{
const{getByTestId}=utils.render(
,
[
utils.gqlMock（列出项目，项目），
utils.gqlMock（删除项，删除项，
{id:Item.id}），//应该在单击test-
delete-1元素，但它不是，因为我得到的timedout错误
//多姆切斯
utils.gqlMock（列表项，[…项，删除项]），
]
);
单击（getByTestId（“test-delete-1”）；
wait utils.waitForDomChange（）；//它在这里抛出错误timedout
expect（getByTestId（“test-delete-1”）.toBeNull（）；
) 

单击delete按钮后，我希望删除该项目。因此，我检查delete元素是否为null

但是这个测试失败了…因为这个delete元素仍然可见

---

有人能告诉我如何在这里模拟删除项目吗？谢谢。

在没有看到所有代码的情况下，您希望删除按钮（您正在测试的内容）还是某些项目（如项目数组中的项目）要删除？我希望该项被删除每个项都有自己的删除按钮。SomeComponent看起来像什么？更新了问题。在没有看到所有代码的情况下，您希望删除按钮（您正在测试的内容）还是某个项（如项数组中的内容）要删除？我希望该项目被删除每个项目都有自己的删除按钮。SomeComponent看起来像什么？更新了问题。