Global mutate, react-router and tests

[hovsater]

We're using React Router and SWR together. Specifically, we're using the new data loading/mutation capabilities of React Router V6.4. While SWR provides preload that ease with fetching data inside a route's loader. There's an inherent problem when it comes to mutations inside a route's action. Since the global mutate function of SWR only work with the default provider, it makes testing hard (if not impossible) to properly test code that makes use of it.

In our tests, we ensure each test run inside of a "wrapper component".

export const Wrappper = ({ children }) => {
  return (
    <SWRConfig value={{ ...swrConfig, provider: () => new Map() }}>
      {children}
    </SWRConfig>
  );
};

This works great, but breaks down when we're testing a code path using the global mutate function. Since the global mutate function only works with the default provider. The code works, but the tests fail. Normally, we'd use the useSWRConfig hook to grab a reference to the current mutate function, but this isn't an option since hooks can't be used inside a route's loader or action.

Is there a solution here I'm not seeing or is this just an unfortunate incompatibility between SWR's API and React Router's API?