Как издеваться над client.readQuery из Apollo 2 в Jest

Есть компонент, который я использую из кеша, созданного в apollo и хранящегося внутри файла client.

В какой-то момент в качестве обратного вызова с ввода я делаю следующий вызов:

const originalName = client.readQuery<NamesCached>({ query: NamesCached })!.names

это возвращает непосредственно массив объектов.

Однако я не знаю, как проверить это в моем компоненте. Мое первое предположение состояло в том, чтобы имитировать исключительно client.readQuery, чтобы вернуть мне массив из моего __fixtures__. Это не сработало.

Вот мой лучший способ поиздеваться над этим:

it('filters the name in the search', () => {
  jest.doMock('@/ApolloClient', () => ({
    readQuery: jest.fn()
  }))
  const client = require('@/ApolloClient')
  client.readQuery.mockImplementation(()=> Promise.resolve(names()))

  const { getByPlaceholderText, queryByText } = renderIndexNames()
  const input = getByPlaceholderText('Search…')

  fireEvent.change(input, { target: { value: 'Second Name' } })

  expect(queryByText('Title for a name')).not.toBeInTheDocument()
})

Для этого теста я использую react-testing-library. Это мой лучший бросок на данный момент...

jest.doMock('@/ApolloClient', () => ({
    readQuery: jest.fn()
  }))
  const client = require('@/ApolloClient')
  client.readQuery.mockImplementation(()=> Promise.resolve(names()))

Важно, что опирается на один ИТ, а не на топ, так как есть другие тесты, которые используют клиент и работают правильно. С этим я мог издеваться в тесте при вызове client.readQuery(), но затем сам компонент возвращается в исходное состояние.

Моя цель Найдите способ смоделировать client.readQuery и вернуть данные, которые я ищу. Я подумал в насмешку, но любое другое решение, которое может работать для одного или группы тестов (без всех из них), было бы более чем желанным.

Я также пытался издеваться над вершиной, но тогда другие терпят неудачу, и я не мог воспроизвести, чтобы вернуться к реальной реализации.

Быстрое продолжение этой темы: я не нашел решения. Я решил изолировать компонент <Mutation> и после получения данных вызвать основной компонент, отправив мутацию через реквизит. Хотя было бы неплохо увидеть, как кто-то решает эту проблему.

Ruffeng 30.04.2019 12:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
6
1
1 012
0

Другие вопросы по теме