SWR cache not being cleared between tests

[pavsidhu]

Hey, I'm trying to test a component that makes a request using SWR. I'm mocking the server with Mock Service Worker.

I created a simple fetcher function that throws an error if the request returns a status code of 2xx. The App component renders different text depending on if SWR returns the error from the fetcher function. Below is the example I just described:

// Setup

const mockServer = setupServer(
  rest.get("/1", (_, res, ctx) => res(ctx.status(200)))
)

beforeAll(() => mockServer.listen())
afterAll(() => mockServer.close())
afterEach(() => {
  mockServer.resetHandlers()
  cache.clear()
})

// Component

const fetcher = (endpoint) =>
  fetch("http://localhost" + endpoint).then((response) => {
    if (!response.ok) throw new Error()
  })

function App() {
  const { error } = useSWR("/1", { fetcher, dedupingInterval: 0 })
  return error ? "error" : "page"
}

// Test

describe("App", () => {
  test("X", async () => {
    render(<App />)

    expect(await screen.findByText("page")).toBeInTheDocument()
  })

  test("Y", async () => {
    mockServer.use(rest.get("/1", (_, res, ctx) => res(ctx.status(500))))

    render(<App />)

    expect(await screen.findByText("error")).toBeInTheDocument()
  })
})

I expect both these tests to pass however only the first X passes. If I remove test X, then test Y passes. If X is present, no error is thrown in the Y. I assumed this may have been a caching issue however as you can see above cache.clear() is called after every test. Am I missing something? Thanks

[pavsidhu]

Turns out there's already an issue filed for this: #781