redux 在使用MSW和Jest时，如何在请求之间清除测试中的RTK查询缓存？

6g8kf2rb 于 2022-11-12 发布在 Jest

关注(0)|答案(3)|浏览(191)

我正在使用Redux Toolkit和RTK Query with MSW进行模拟，但在测试中尝试返回错误时，似乎得到了相同的数据。我怀疑这是RTK Query缓存行为的问题，并尝试使用工具包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时，我如何实现相同的效果？

redux

来源：https://stackoverflow.com/questions/67999073/how-to-clear-rtk-query-cache-in-tests-between-requests-when-using-msw-and-jest

3条答案

按热度按时间

kjthegm61#

我建议您阅读RTK查询测试：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())

赞(0）回复(0）举报 2022-11-12

u5i3ibmn2#

根据上面的答案，我在我的应用程序中做了以下操作：

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

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

这里的wrapper是Redux和其他上下文的提供程序。

赞(0）回复(0）举报 2022-11-12

xqk2d5yq3#

解决方案：这将立即删除所有现有的缓存条目，所有查询将被视为“未初始化”。因此，只需将下面的代码放入onClick或根据您的情况，这样当您点击输入请求时，缓存也将被清除。下面的api是您将在存储中的rtk查询中设置的api的名称。