Question

我有这个组件，可以从阿波罗缓存中获取添加的项目。我有一个从添加的项目数组中删除项目的方法我正在努力为此编写测试。.所以下面是我编写的组件：

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

我想测试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();

  });

我如何测试removeItem方法？而且我猜addItem将像这样expect(addedItem).toBeNull();

进行测试

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

0 个答案: