Как очистить кеш запросов RTK в тестах между запросами при использовании MSW и Jest?

Я использую Redux Toolkit и RTK Query с MSW для издевательства, но, похоже, я получаю те же данные, когда пытаюсь вернуть ошибку в тестах. Я подозреваю, что это проблема с кэшированием RTK Querys, и я пытался отключить его с помощью этих параметров в методе createApi инструментария, но они, похоже, не решают проблему:

      keepUnusedDataFor: 0,
refetchOnMountOrArgChange: true,
refetchOnFocus: true,
refetchOnReconnect: true,

В документации MSW приведены примеры того, как решить эту проблему при использовании других библиотек: https://mswjs.io/docs/faq#why-do-i-get-stale-responses-when-using-react-queryswretc

      // react-query example
import { QueryCache } from 'react-query'

const queryCache = new QueryCache()

afterEach(() => {
  queryCache.clear()
})

// swr example
import { cache } from 'swr'

beforeEach(() => {
  cache.clear()
})

Как я мог добиться того же при использовании Redux Toolkit и RTK Query?

Источник

4 ответа

Я могу порекомендовать прочитать тесты RTK Query: https://github.com/reduxjs/redux-toolkit/blob/18368afe9bd948dabbfdd9e99b9e334d9a7beedf/src/query/tests/helpers.tsx#L153-L166

Это то, что мы делаем:

        const refObj = {
    api,
    store: initialStore,
    wrapper: withProvider(initialStore),
  }
  let cleanupListeners: () => void

  beforeEach(() => {
    const store = getStore() as StoreType
    refObj.store = store
    refObj.wrapper = withProvider(store)
    if (!withoutListeners) {
      cleanupListeners = setupListeners(store.dispatch)
    }
  })
  afterEach(() => {
    if (!withoutListeners) {
      cleanupListeners()
    }
    refObj.store.dispatch(api.util.resetApiState())
  })

Итак, вы ищете dispatch(api.util.resetApiState())

Источник

Основываясь на приведенном выше ответе, я сделал следующее в своем приложении:

      beforeEach(() => {
  const { result } = renderHook(() => useAppDispatch(), { wrapper });
  const dispatch = result.current;

  dispatch(myApi.util.resetApiState());
});

wrapper вот провайдеры для Redux и другого контекста.

Источник

РЕШЕНИЕ. Это приведет к немедленному удалению всех существующих записей кэша, и все запросы будут считаться «неинициализированными». Поэтому просто поместите приведенный ниже код в onClick или в соответствии с вашим сценарием, чтобы, когда вы нажмете запрос на ввод, и кеш также был бы очищен. ниже здесь API — это ваше имя API, которое вы бы установили в своем запросе rtk в магазине.

      dispatch(api.util.resetApiState());

Для получения дополнительной информации ознакомьтесь с документацией https://redux-toolkit.js.org/rtk-query/api/created-api/api-slice-utils.

Источник

Недавно я столкнулся с этой проблемой и могу подтвердить отправку (myApi.util.resetApiState()); внутри работает afterEach().

Я написал статью на Medium, чтобы узнать больше, чтобы помочь другим: https://medium.com/@t3j3ndra/how-to-clear-rtk-query-cache-in-tests-between-requests-when-using-mock- сервис-работник-и-шутка-cb36ea4ffb4b

Источник
Другие вопросы по тегам