Модульное тестирование для использования подписки хука - React - Apollo - PullRequest
Новая
       6

Модульное тестирование для использования подписки хука - React - Apollo

1 голос
/ 17 февраля 2020

Я пытаюсь написать модульный тест Jest для компонента React 'Dashboard'.

'Dashboard' содержит хук 'useSubscription' , который возвращает некоторые данные с сервера.

Панель инструментов. js компонент: 

// imports ...

const Dashboard = mainData => {
  // States declations ...

  const {
    loading: meLoading,
    error: meErrorMe,
    data: meData
  } = useQuery(GET_MYSELF);

  const { data: newNotificationData } = useSubscription(
    NOTIFICATION_SUBSCRIPTION,
    {
      variables: { userId: me && me.id }
    }
  );

  // ...

  // return some JSX ...
};

Модульный тест: 

import TestRenderer, { act } from "react-test-renderer";
import { MockedProvider } from "@apollo/react-testing";
import React from "react";
import wait from "waait";

import Dashboard, { NOTIFICATION_SUBSCRIPTION } from "../dashboard";
import { GET_MYSELF } from "../../gqls/queries";

const mocks = [
  {
    request: {
      query: GET_MYSELF
    },
    result: {
      data: {
        me: {
          id: "5e42d97c86530405f4028ab4",
          name: "Montacer Dkhilali",
          email: "montacer.dkhilali@gmail.com",
          roles: ["ADMIN"],
          __typename: "User"
        }
      }
    }
  },
  {
    request: {
      query: NOTIFICATION_SUBSCRIPTION,
      variables: {
        userId: "5e42d97cx5x30405f405azs5"
      }
    },
    result: {
      data: {
        newNotificationData: {
          id: "5e42d97cx5x30405f405azs5",
          read: false,
          title: "Notification 1",
          __typename: "Notification"
        }
      }
    }
  }
];

describe("Dashboard page", () => {
  it("should render without error", async () => {
    await act(async () => {
      TestRenderer.create(
        <MockedProvider mocks={mocks}>
          <Dashboard />
        </MockedProvider>
      );
    });
  });

После некоторых ошибок запуск модульного теста: 

Dashboard page
    ✕ should render without error (47ms)

  ● Dashboard page › should render without error

    No more mocked responses for the query: subscription onNotificationsAdded($userId: ID!) {      notificationsAdded(userId: $userId) {
        id
        read
        title
        __typename
      }
    }
    , variables: {}

      90 |   } = mainData;
      91 | 
    > 92 |   const { data: newNotificationData } = useSubscription(
         |                                         ^
      93 |     NOTIFICATION_SUBSCRIPTION,
      94 |     {
      95 |       variables: { userId: me && me.id }

      at MockLink.request (node_modules/@apollo/react-testing/lib/react-testing.cjs.js:85:13)
      ...
      at act (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17271:14)
      at Object.<anonymous> (src/pages/__tests__/dashboard.js:63:11)

console.warn node_modules/ts-invariant/lib/invariant.js:33
    Found @client directives in a query but no ApolloClient resolvers were specified. This means ApolloClient local resolver handling has been disabled, and @client directives will be passed through to your li
nk chain.

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11958
    The above error occurred in the <Dashboard> component:
        in Dashboard (created by Query)
        in Query (created by Apollo(Dashboard))
        in Apollo(Dashboard) (created by Query)
        in Query (created by Apollo(Apollo(Dashboard)))
        in Apollo(Apollo(Dashboard)) (at dashboard.js:66)
        in ApolloProvider (created by MockedProvider)
        in MockedProvider (at dashboard.js:65)

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit [url](fb.me/react-error-boundaries) to learn more about error boundaries.

Чтобы исправить это, я должен изменить способ, которым я высмеиваю данные?

...