Существует множество примеров тестирования react-apollo-client, но никто не обсуждает, как выполнить подписку на стороне клиента во время модульного тестирования.

В этой статье мы используем Jest с энзимом для выполнения модульного тестирования.

Допустим, у вас есть apollo graphQL с Queries.js, Mutations.js и Subscriptions.js.

Запросы.js

Mutations.js

Подписки.js

BookDetail.jsx, для которого мы хотим написать тестовые примеры.

Решающим моментом здесь является subscribeToMore в componentDidMount, который играет жизненно важную роль для выполнения подписок. Общая ошибка, которую обычно делают разработчики, заключается в том, чтобы издеваться над subscribeToMore с помощью jest.fn(). Это основная причина, по которой подписка не выполняется.

Итак, давайте посмотрим, как инициализировать subscribeToMore и передать его в качестве реквизита.

Как вы знаете, Запрос возвращает subscribeToMore в результате, поэтому нам нужен именно этот subscribeToMore . В нашем случае subscribeToMore взят из BookDetailsSubscribeToMore. jsx.

BookDetail.test.js

В BookDetail.test.jsсначала нам нужно имитировать BookDetailsSubscribeToMore.jsx, чтобы получить subscribeToMoreчтобы его можно было передать в качестве реквизита, как вы можете видеть в приведенном выше коде.

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

В BookDetails.jsxоператор subscribeToMorehave if-else block для выполнения обоих операторов, запрос и подписки необходимо снова имитировать, чтобы выполнить условия.

У меня есть файл setupTests.js, поэтому мне не нужно писать configure и Adapter в тестовых примерах.

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

Подведение итогов

Мы видели, как мы можем выполнять подписки в модульном тестировании.

Нам нужно помнить несколько вещей:

  • Не издевайтесь над subscribeToMore с помощью jest.fn() .
  • Необходимо использовать фактические subscribeToMore из запросов.
  • Подделка подписок вместе с запросами.