[jest] Still throwing "not wrapped in act(...)" errors

Follow up on https://github.com/pmndrs/zustand/issues/272#issuecomment-809660791.

After updating my test runner to jest-circus and wrapping each resetFn in act(...) I thought I got rid of this error, but it came up again after another state update that is done inside a useEffect on mount. This one reads a json file from the filesystem and stores it in a zustand store:

    refreshGallery: async () => {
      const galleryData = await api.readGallery();
      set((draft) => {
        draft.gallery = galleryData;
      });
    },

Which basically does the following (Electron app):

  ipcHandle('readGallery', async () => {
    const dbPath = path.join(app.getPath('userData'), 'media', 'database.json');
    const db = await fs.readFile(dbPath, 'utf-8');
    const data = JSON.parse(db);
    return data;
  });

The (newly) failing test is

test('sidebar exists', () => {
  render(<App />);
  expect(screen.getByTitle('nav.camera')).toBeInTheDocument();
});

I’ve managed to fix the wrapped in act(...) error by basically wrapping the entire test in async:

test('sidebar exists', async () => {
  await act(async () => {
    render(<App />);
  });
  expect(screen.getByTitle('nav.camera')).toBeInTheDocument();
});

Could this be a zustand issue, or is it something jest-related?

[italodeandra]

I had the same problem with valtio. I also had the same process as you, I thought jest-circus had fixed it (https://github.com/pmndrs/zustand/issues/272#issuecomment-839943504), but if you have an effect that updates the store, then the problem will happen again.

The explanation is that the test ends before valtio/zustand end doing their thing to the proxy/store, so React triggers this warning, and I couldn’t find any way to make it wait for the change.

[squarism]

@ivancuric I watched the videos here btw: https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning There are lots of tips and examples there. And lots of explanation.

Adding

const promise = Promise.resolve()
await act(() => promise)

To the end of my test fixed this for me but I recommend watching those videos. Extremely helpful to me.