Насмешка над функцией, возвращаемой реагирующим хуком - PullRequest
Новая
       19

Насмешка над функцией, возвращаемой реагирующим хуком

0 голосов
/ 06 марта 2020

Я строю нумерацию страниц, используя хук useQuery как часть клиента Apollo в React, который предоставляет функцию под названием fetchMore, показанную здесь: https://www.apollographql.com/docs/react/data/pagination/

Все работает нормально, но я пытаюсь написать тест в одном из вариантов использования, когда происходит сбой функции fetchMore из-за сетевой ошибки. Код в моем компоненте выглядит следующим образом. 

const App = () => {
// Some other component logic
  const {loading, data, error, fetchMore} = useQuery(QUERY)
  
  const handleChange = () => {
    fetchMore({
      variables: {
        offset: data.feed.length
      },
      updateQuery: (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult) return prev;
        return Object.assign({}, prev, {
          feed: [...prev.feed, ...fetchMoreResult.feed]
        });
      }
    }).catch((e) => {
     // handle the error
    })
  }
}

В основном я хочу проверить случай, когда функция функции fetchMore выдает ошибку. Я не хочу высмеивать весь useQuery, только функцию fetchMore. Как лучше всего использовать в моем тесте функцию fetchMore?

1 Ответ

1 голос
/ 06 марта 2020

Один из способов сделать это - просто посмеяться над крючком

В вашем файле spe c: 

import { useQuery } from '@apollo/react-hooks'

jest.mock('@apollo/react-hooks',() => ({
  __esModule:true
  useQuery:jest.fn()
});

console.log(useQuery) // mock function - do whatever you want!

/*
 e.g. useQuery.mockImplementation(() => ({
  data:...
  loading:...
  fetchMore:jest.fn(() => throw new Error('bad'))
});
*/

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

РЕДАКТИРОВАТЬ:

  1. Поиск __esModule: true на это стр. и вы поймете.
  2. Вероятно, проще просто смоделировать всю функцию и вернуть все как ложные данные. Но вы можете снять его , чтобы использовать реальный, чтобы не конфликтовать с другими тестами.
...