如何正確測試Apollo GraphQL查詢的組件？

Question

在進行相同測試幾個小時后，我感到沮喪。 我有一個返回查詢組件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>,
    );
  });
});

那我想念什么呢？

Answer 1

首先，您似乎在許多測試中都缺少斷言。 這是有目的的嗎？ 例如，我希望您在第一個測試用例中使用快照斷言（“它應呈現無錯誤”）。 唯一可以斷言的測試用例是“應該呈現加載狀態”。

關於缺少的覆蓋范圍，在沒有看到完整的Jest測試報告的情況下，我僅假設您突出顯示的功能從未運行過，即您沒有在執行toggleFiltersModalHandler時測試dispatch(toggleFiltersModal())是否正在運行。 為了達到100％的測試覆蓋率，您需要測試這些功能。 當您使用酶時，這可能很簡單：

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

毫無疑問，您必須進行一些試驗和錯誤才能在包裝器中找到該道具，但是一旦找到它，只需執行它並斷言該函數已經使用了一個開玩笑的間諜來執行。