Блог

Есть компонент, который я использую из кэша, созданного мной в 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()))
  

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

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

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