Как правильно протестировать компонент, представляющий собой запрос Apollo GraphQL? - PullRequest
Новая
       16

Как правильно протестировать компонент, представляющий собой запрос Apollo GraphQL?

0 голосов
/ 24 января 2019

У меня возникает ситуация, когда я расстраиваюсь после нескольких часов работы над тем же тестом.У меня есть компонент запроса, который возвращает datatable.Этот компонент, который я уже тестировал, имеет 100% тестовое покрытие.

В тесте утверждается, что отсутствует покрытие в строках 42, 145, 148, 151 (см. Компонент ниже, чтобы увидеть примечания о строках).

Если вы посмотрите до конца компонента, он претендует на покрытие некоторых обработчиков действий.

Но сейчас я тестирую его родительский компонент, а именно: 

// imports

const GetShipments = ({
  t,
  shipmentsPaginationHandler,
  toggleFiltersModalHandler,
  isFiltersModalOpened,
}) => {
  const removeFilterConst = filterKey => () => {
    removeFilterHandler(filterKey);
  };

  return (
    <>
      <TableToolbarComp
        toggleFiltersModal={toggleFiltersModalHandler} // LINE 42
        isFiltersModalOpened={isFiltersModalOpened}
        removeFilter={removeFilterConst}
      />
      <Query
        query={GET_SHIPMENTS}
        variables={{
          ...filters,
          shippedDate: filters.shippedDate,
          limit: pagination.pageSize,
          offset: (pagination.page - 1) * pagination.pageSize,
        }}
        context={{ uri: `/this?url=${softlayerAccountId}` }}
      >
        {({ loading, error, data }) => {
          let tableRowsModel;
          let itemsCount;

          if (error) {
            return (...);
          }

          if (loading) return (...);

          if (data && data.GetShipments) {
            ({ itemsCount } = data.GetShipments);

            if (data.GetShipments.shipments) {
              tableRowsModel = data.GetShipments.shipments.map(row => ({
                ...row,
                id: `${row.id}`,
                type: row.type.name : '',
                status: row.status ? row.status.name : '',
              }));
            } else {
              tableRowsModel = [];
            }

            setCSVDataHandler(data.GetShipments);
          }

          return (
            <ShipmentsTable tableRows={tableRowsModel} />
          );
        }}
      </Query>
    </>
  );
};

GetShipments.propTypes = {
  // propTypes validation
};

export default compose(
  connect(
    store => ({
      softlayerAccountId: store.global.softlayerAccountId,
      isFiltersModalOpened: store.shipments.filtersModalOpened,
    }),
    dispatch => ({
      removeFilterHandler: filterKey => {
        dispatch(removeFilter(filterKey));
      },
      toggleFiltersModalHandler: () => {
        dispatch(toggleFiltersModal()); // LINE 145
      },
    }),
  ),
  translate(),
)(GetShipments);

Большинство тестов, которые я создаю, похоже, просто игнорирует то, что я делаю.

Это то, что я имею до сих пор: 

import React from 'react';
import { MockedProvider } from 'react-apollo/test-utils';
import { mount } from 'enzyme';
import { Provider as ReduxProvider } from 'react-redux';
import GetShipments from '../../containers/GetShipments';
import createMockStore from '../../../../utils/createMockStore';

import store from '../../../../redux/store';

import mocks from '../../__fixtures__/shipments-mock';

jest.mock('react-i18next', () => ({
  // this mock makes sure any components using the translate HoC receive the t function as a prop
  translate: () => Component => {
    Component.defaultProps = { ...Component.defaultProps, t: key => key }; 
    return Component;
  },
}));

describe('Container to test: GetShipments', () => {
  let props;

  beforeEach(() => {
    props = {
      t: jest.fn(() => k => k),
      softlayerAccountId: 123,
      isFiltersModalOpened: false,
      toggleFiltersModalHandler: jest.fn(() => k => k),
      setFiltersHandler: jest.fn(() => k => k),
      removeFilterHandler: jest.fn(() => k => k),
    };
  });

  it('should render without errors', () => {
    mount(
      <MockedProvider
        mocks={mocks.filter(mock => mock.id === 'get-shipments-default')}
      >
        <ReduxProvider store={store}>
          <GetShipments
            {...props}
            store={createMockStore({
              global: {
                accountGuid: 'abcd-1234',
                softlayerAccountId: '1234',
              },
            })}
          />
        </ReduxProvider>
      </MockedProvider>,
    );
  });

  it('should render loading state initially', () => {
    const wrapper = mount(
      <MockedProvider mocks={[]} addTypename={false}>
        <ReduxProvider store={store}>
          <GetShipments {...props} />
        </ReduxProvider>
      </MockedProvider>,
    );

    expect(wrapper.find('DataTableSkeleton')).toHaveLength(1);
  });

  it('should render data', async () => {
    const wrapper = mount(
      <MockedProvider mocks={mocks} addTypename={false}>
        <ReduxProvider store={store}>
          <GetShipments store={store} {...props} />
        </ReduxProvider>
      </MockedProvider>,
    );

    await new Promise(resolve => setTimeout(resolve));
    await wrapper.update();

    console.log(wrapper.debug());
  });

  it('should NOT render any data', () => {
    mount(
      <MockedProvider mocks={[]} addTypename={false}>
        <GetShipments store={store} />
      </MockedProvider>,
    );
  });
});

Так чего мне не хватает?

1 Ответ

0 голосов
/ 24 января 2019

Во-первых, вы, кажется, пропускаете утверждения в ряде ваших тестов.Это целенаправленно?Например, я ожидаю, что вы будете использовать утверждение снимка в первом тестовом примере («оно должно отображаться без ошибок»).Единственный тестовый пример, который утверждает что-то, «должен отображать состояние загрузки».

Что касается отсутствующего покрытия, не видя полного отчета о тестировании Jest, я просто предположу, что выделенные вами функции никогда не будутвыполняется, т. е. вы не проверяете, что dispatch(toggleFiltersModal()) работает при выполнении toggleFiltersModalHandler.Чтобы достичь 100% покрытия тестами, вам необходимо протестировать эти функции.Поскольку вы используете Enzyme, это может быть так просто: 

const wrapper = mount(
    <MockedProvider mocks={mocks} addTypename={false}>
        <ReduxProvider store={store}>
            <GetShipments store={store} {...props} />
        </ReduxProvider>
   </MockedProvider>
);

wrapper.props().toggleFiltersModalHandler();

К сожалению, поскольку вы используете HOC, вам, скорее всего, придется find ваш компонент, прежде чем вы сможете выполнить функцию наprop, вот так: 

const wrapper = mount(
    <MockedProvider mocks={mocks} addTypename={false}>
        <ReduxProvider store={store}>
            <GetShipments store={store} {...props} />
        </ReduxProvider>
   </MockedProvider>
);

wrapper.find(GetShipments).props().toggleFiltersModalHandler();

Вам, без сомнения, придется сделать несколько проб и ошибок, чтобы найти реквизит в вашей обертке, но как только вы его найдете, просто запустите его и подтвердите, что функциявыполнено с использованием шпионского шута.

...