Reactjs 如何测试从列表中删除项的方法？

我有一个从apollo缓存中获取添加项的组件。我有一个从added items数组中删除项的方法 我正在努力为它写一个测试。。下面是我写的组件：

const GET_ADDED_ITEMS = gql`
  query GetAddedItems{
    addedItems @client {
      id
      name
    }
  }
`;

type Props = {
  offer?: Offer,
  render: RenderProps => any,
  client: ApolloClient<any>
};

class AddedItems extends React.Component<Props> {
  render() {
    const { offer, render } = this.props;

    const removeItem = (selectedItem) => {
      this.props.client.query({ query: GET_ADDED_ITEMS }).then(({ data = {} }) => {
        const { addedItems } = data;
        const newItems = [ ...addedItems ];
        newItems.splice(addedItems.findIndex(item => item === selectedItem, 1));

        this.props.client.writeData({
          data: {
            addedItems: newItems.map(item => ({
              ...item
            }))
          }
        });
      });
    }

    return (
      <Query query={GET_ADDED_ITEMS}>
        {({ data, loading }) => {
          if (loading) return null;
          const { addedItems } = data;

          return render({
            addedItems,
            removeItem
          });
        }}
      </Query>
    );
  }
}

export default withApollo(AddedItems);

const GET\u ADDED\u ITEMS=gql`
查询getAddItems{
addedItems@client{
身份证件
名称
}
}
`;
类型道具={
要约？：要约，
render:RenderOps=>any，
客户：阿波罗客户
};
类AddedItems扩展了React.Component{
render（）{
const{offer，render}=this.props；
const removietem=（selectedItem）=>{
this.props.client.query（{query:GET_ADDED_ITEMS}）{
常量{addedItems}=数据；
常量newItems=[…addedItems]；
拼接（addedItems.findIndex（item=>item==selectedItem，1））；
this.props.client.writeData({
数据：{
addedItems:newItems.map（item=>({
…项目
}))
}
});
});
}
返回(
{（{data，loading}）=>{
if（加载）返回null；
常量{addedItems}=数据；
返回渲染({
增编，
移除项目
});
}}
);
}
}
使用Apollo导出默认值（AddedItems）；

我想测试removeItem方法。我的背景如下：

  it('removes an item', async () => {
    const { getByText, fireEvent } = render(
      <MockedProvider
        mocks={mocks}
        addTypename={false}
      >
        <AddedItems
          offer={offer}
          render={({ addedItems, removeItem }) => (
            <ItemSummaryContainer addedItems={addedItems} removeItem={removeItem}/>
          )}
        />
      </MockedProvider>
    );

    const addedItem = await waitForElement(() => getByText('Point of sale'));
    expect(addedItem).toBeVisible();

  });

it（'removeanitem'，async（）=>{
常量{getByText，fireEvent}=render(
(
)}
/>
);
const addedItem=wait waitForElement（（）=>getByText（‘销售点’）；
expect（addedItem）.tobevicible（）；
});

---

我如何使用测试删除项方法？我猜addedItem将被测试为

expect（addedItem.toBeNull（）
删除项目时，您是否看到UI中有任何更改？如果是，那就是我要测试的，e。G检查是否在单击触发项删除的按钮时，不再显示该项。最好测试数据而不是DOM。