Jest and useSWRInfinite causes act(() =>) problem.

[nathanmrtns]

So, I have a component that runs useSWRInfinite to fetch some data, once this data is fetched, it updates the element.
This fetch occurs on component mount.

const Servers = ({ title, session, initialData }) => {
  const router = useRouter();
  const team = session?.team;
  const projectId = router.query.project_id;

  const { data, error, mutate, size, setSize, isValidating } = useSWRInfinite(
    index =>  `/api/url`); //tried with initialData but the problem still occurs
  return <Component that updates when data is fetched/>
}

The problem is that in tests, it causes the act problem:
` Warning: An update to Servers inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});`

I tried encapsulating the component creation inside the act, but it doesn't work.

  it.only('should show the BlankSate component', async () => {
    wrapper = mount(
      <RouterContext.Provider value={router}>
        <Servers title="Servers" />
      </RouterContext.Provider>);
      expect(wrapper.find(BlankState)).toHaveLength(1); //it breaks here with the act message
  });

Do you guys know what should I do?

[nathanmrtns]

In case anybody else finds the same problem, here is my solution.

jest.mock("swr");
useSWRInfinite.mockReturnValue({ "data": [{ data: [] }], "error": null });

  it.only('should show the BlankSate component', async () => {
    useSWRInfinite.mockReturnValue({ "data": [{ data: [] }], "error": null }); //set mock value per test

    wrapper = mount(
      <RouterContext.Provider value={router}>
        <Servers title="Servers" />
      </RouterContext.Provider>);
      expect(wrapper.find(BlankState)).toHaveLength(1); //it breaks here with the act message
  });

[ilgianfra]

I have the same problem as @at-webdev, I am using the last version and of course I am importing swr and using directly useSWRInfinite.mockReturnValue 🤔

[nathanmrtns]

Post here your code snippet

[ilgianfra]

I just notice that jest.mock("swr") was inside the test function but I realised that I need that outside. Something like that:

jest.mock("swr");
test('test', () => {
  useSWR.mockReturnValue({ "data": [{ data: [] }], "error": null });
  const { container } = renderWithReactRouterCustomProvider(<Component />);
  expect(container).toBeTruthy();
});

I have also used with useSWR.
Sorry my bad!

[nathanmrtns]

Did it work?

[ilgianfra]

yes! it did work!