0

I have this component that gets added items from the apollo cache. I have a method that removes an item from the added items array I'm struggling to write a test for it.. So below is the component that I wrote:

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

I want to test the removeItem method. I have this context below:

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

  });

How I do test removeItem method? And I'm guessing the addedItem will tested as such expect(addedItem).toBeNull();

isherwood
  • 46,000
  • 15
  • 100
  • 132
drifterOcean19
  • 314
  • 1
  • 12
  • Do you see any changes in the UI when you remove an item? If yes, that's what I'd test for, e. g. check that when the button that triggers item removal is clicked, the item isn't displayed anymore. – Clarity Nov 06 '19 at 15:07
  • It's better to test data than the DOM. – isherwood Nov 06 '19 at 15:07

0 Answers0