Попытка протестировать компонент, используя ловушку useQuery, но onCompleted, вызывая проблемы - PullRequest
0 голосов
/ 29 октября 2019

Я пытаюсь протестировать следующий компонент, но не могу заставить его визуализироваться в Jest после выборки данных из-за ошибки в пропущенном запросе onCompleted. У меня есть другой компонент, который по сути тот же, но не использует onCompleted вообще и не представляет проблем для Jest.

Вот этот компонент, с некоторым кодом, сокращенным для краткости:

import { trackProductListView } from "src/shared/components/analytics";
import searchResourcesQuery from "./search-resources.graphql";
const SearchResources = ({ filter, orderBy, query }) => {
  const { loading, error, data, fetchMore } = useQuery(searchResourcesQuery, {
    variables: {
      orderBy,
      filter,
      query
    },
    onCompleted: ({ searchResources: { results } }) =>
      results && trackProductListView("Search", null, results, 1)
  });
...

  return (
    <div>
      {!results.length ? (
        <EmptySearch variant="resources" />
      ) : (
        <InfiniteResources
          trackContext="Search"
          hasMore={!!searchAfter}
          loadMoreEntries={loadMoreEntries}
          resources={results}
        />
      )}
    </div>
  );
};

А вот тест, хотя я удалил фиктивные результаты (опять же, для краткости):

import React from "react";
import { act, wait } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { MockedProvider } from "@apollo/react-testing";
import renderWithRouter from "src/shared/test-utils/renderWithRouter.js";
import SearchResources from "./search-resources";
import searchResourcesQuery from "./search-resources.graphql";
const mocks = [
  {
    request: {
      query: searchResourcesQuery,
      variables: { query: "test" }
    },
    result: {
      data: {
        searchResources: {
          searchAfter: null,
          results: [],
          __typename: "ResourceList"
        }
      }
    }
  }
];
it("renders", async () => {
  const { getByText } = renderWithRouter(
    <MockedProvider addTypename={false} mocks={mocks}>
      <SearchResources query="test" />
    </MockedProvider>
  );
  await act(() => wait(() => getByText("Resource Partner Link test")));
  expect(getByText("Resource Partner Link test")).toBeInTheDocument();
});

Запуск этих тестов приводит к:

TypeError: (0 , _analytics.trackProductListView) is not a function

Любойпомощь в исправлении этого наиболее ценится!

1 Ответ

0 голосов
/ 30 октября 2019

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...