Zustand state is not updating or is not reflecting in tests

[aqarain]

/* store.tsx */

type AppState = {
  item: string;
  setItem: (item: string) => void;
};

const store = createStore<AppState>()((set) => ({
  item: '',
  setItem: (item: string) => set({ item }),
}));


const createBoundedUseStore = ((store) => (selector) => useStore(store)) as <
  S extends StoreApi<unknown>,
>(
  store: S
) => {
  (): ExtractState<S>;
  <T>(selector: (state: ExtractState<S>) => T): T;
};

type ExtractState<S> = S extends { getState: () => infer X } ? X : never;

export const useAppReactStore = createBoundedUseStore(store);

/* App.tsx */

const App = () => {
  const { item, setItem } = useAppReactStore();


  return (
    <button onClick={() => setItem('Foo')}> Click me </button>
    <h1>{item || 'placeholder'}</h1>
  )
}

/* App.test.tsx */

describe('App', () => {
  const setItemMock = jest.fn();

  beforeEach(() => {
    (useAppReactStore as jest.Mock).mockReturnValue({
      item: '',
      setItem: setItemMock,
    });
  });

  it('handles Click me button click', () => {
    render(<App />);
    const btn = screen.getByRole('button', { name: 'Click me' });

    fireEvent.click(btn);

    expect(setItemMock).toHaveBeenCalledTimes(1);     // ✅ PASS
    expect(setItemMock).toHaveBeenCalledWith('Foo');  // ✅ PASS
    const heading = screen.getByRole('heading');
    expect(heading).toHaveTextContent('Foo');         // ❌ FAIL
  });

I have Zustand store set up like the above in my React app.
I used the same code in store.tsx as given in the Zustand guide.

The problem is the state change is not reflected. I guess that is why the last assertion is failing.

How can I make that assertion pass? What am I doing wrong here?

[dbritto-dev]

@aqarain btw, I encourage you to use testing-library/user-event. Let's fix your current code, you are missing act to call any action in order to trigger a render

So your code should look like this:

act(() => {
  fireEvent.click(btn)
})

Note: you need to import act from testing library

[dbritto-dev]

@aqarain with userEvent you need to use await. The other way to test it out would be using waitFor.

await waitFor(() => {
  expect(heading).toHaveTextContent('Foo');
})

Note: in any case you should implement and async function for your tests

[dbritto-dev]

BTW, would you mind sharing me a stackblitz demo?

[aqarain]

I tried all the below 3 but none worked.

1. act(() => { fireEvent.click(btn) })
2. userEvent.click(btn)
3. await waitFor(() => { expect(heading).toHaveTextContent('Foo') })

Stackblitz Demo: https://stackblitz.com/edit/vitejs-vite-xdjblu

[dbritto-dev]

@aqarain here you go -> https://stackblitz.com/edit/vitejs-vite-pcch7h?file=src%2F__tests__%2FApp.test.tsx

btw, I encourage you to review our testing guide

[aqarain]

@dbritto-dev I get an error on the stackblitz. Is it for you too?

[aqarain]

Thank you so much @dbritto-dev for your help ❤️ 💯
It works fine in Chrome but in Firefox it gives the above error. I guess that is Ok for me.

Btw, the issue is not wrapping fireEvent with act and it shouldn't be wrapped in act (https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#wrapping-things-in-act-unnecessarily)
The issue was mocking of setItem

This is the testing guide, right? Or there is another one?

[dbritto-dev]

@aqarain yeah, we don't need act since we are using userEvent, I forgot to remove it. About testing guide, you got it

[wilsonfaustino]

I have the same issue: I can check my state updates and how many times the setter has been called, but my tests fail in check changes in the UI. How can we check it?