SWR cache persistent across tests even with cache clearing and deduping interval at 0

Bug report

Description / Observed Behavior

I have found that some sort of SWR cache(?) persists between tests regardless of clearing the cache and setting the deduping interval to 0. The results are unpredictable and vary each time I run the tests.

Expected Behavior

With cache clearing and deduping interval set to 0, I expected the components using SWR to return the correct data from the API for that test case, not from the previous test case.

Repro Steps / Code Example

Code example here: https://github.com/frdwhite24/swr-testing Example test script is here: https://github.com/frdwhite24/swr-testing/blob/master/src/component/FetchData.test.js

git clone https://github.com/frdwhite24/swr-testing.git cd swr-testing npm install npm test (try running this 10 times and watch the different results)

Additional Context

SWR v0.3.9 Jest as the testing lib

I have implemented mocking of my API using MSW (mock service worker) and am replacing an existing query handler with a runtime request handler. Starting out with a minimal code base, I tested out the MSW runtime request handler resetting with a vanilla fetch command. After this worked 100% of the time I introduced a component using SWR to get the data, and tests that run before, with and after I implement the runtime req handler. I found that one of three scenarios occur:

• All tests pass as expected (very rarely ~5%)
• The test with the runtime request handler returns data in the original handler and so will fail but all others will pass
• The test after the runtime request handler has been implemented but reset fails as it returns the new data set in the previous test’s updated request handler, but all others will pass

I have tried putting a vanilla fetch between the SWR tests and this seems to help it return the correct data. I have also put two SWR tests after each other which are identical, and the first one will fail but the second one will pass. I have logged the SWR cache before and after each test and can see that it is being emptied. I have logged the number of request handlers being used by MSW and have confirmed that they are as expected. I have also forced MSW to reset the handlers between tests using the specific list of handlers used at the initial state. I have tried running each test in isolation using test.only and each one passes 100% of the time.

I’ve been fighting this one for many days now and appreciate the time you spend looking into it!

[lerockit]

Another workaround that I’ve found:

afterEach(async () => {
  await waitFor(() => cache.clear())
})

[missbruni]

For those having issues with RTL and SWR, swr cache.clear() after every test handles a global cache and I think this paired with RTL isn’t working always as expected which leads to cached responses to be used across tests. However, the new version of SWR handles cache on tests differently and you can now have a cache for each rendered component separately. So this has fixed for me:

previous swr solution (does not clean cache correctly between rtl tests)

import {cache, SWRConfig} from 'swr';

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

<SWRConfig value={{ dedupingInterval: 0 }}>
      <Component {...props} />
 </SWRConfig>

new swr 1.0 solution:

import {SWRConfig} from 'swr';

 <SWRConfig value={{ provider: () => new Map(), dedupingInterval: 0 }}>
      <Component {...props} />
 </SWRConfig>

This fixed for me as each component has its own cache so there is no more caching issues between tests. I hope it helps someone!