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.
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.
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)
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:
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!
I've found a workaround:
afterEach(async () => {
cache.clear();
await new Promise(requestAnimationFrame);
});
This might not work if multiple fetches happen within the same test though, I'm not sure.
I think this might be related to https://github.com/vercel/swr/commit/9e734aaff7d3082fc9fd7945f615fb63621b2bc7, @shuding any ideas?
Ran into this one again, can confirm that workaround worked for me on a single fetch test which at least is some progress, still I think this needs to have a more substantial fix as it's causing quite a bit of pain.
I've found a workaround:
afterEach(async () => { cache.clear(); await new Promise(requestAnimationFrame); });This might not work if multiple fetches happen within the same test though, I'm not sure.
I think this might be related to 9e734aa, @shuding any ideas?
worked for me!
ty! I love you!
Another workaround that I've found:
afterEach(async () => {
await waitFor(() => cache.clear())
})
Most helpful comment
I've found a workaround:
This might not work if multiple fetches happen within the same test though, I'm not sure.
I think this might be related to https://github.com/vercel/swr/commit/9e734aaff7d3082fc9fd7945f615fb63621b2bc7, @shuding any ideas?