Существует множество примеров тестирования 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оператор subscribeToMore
have 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
из запросов. - Подделка подписок вместе с запросами.